checkboxについておしえてください

解決済

質問者：dkong
質問日時：2014/07/30 21:35
回答数：2件

<form action=" " method="post">

<input type="checkbox" name=" figure" value="1"><img src="a.png">
<input type="checkbox" name=" figure" value="2"><img src="b.png">
<input type="checkbox" name=" figure" value="3"><img src="c.png">
<input type="checkbox" name=" figure" value="4"><img src="a.png">
<input type="checkbox" name=" figure" value="5"><img src="b.png">

<input type="submit" value="送信する">

</form>

とした場合に、絵の左にくるチェックボックスの位置を、添付した図のように位置を図の中にもってこれないかと考えています。できれば、大きさも変えたいと考えています。
cssでできるのでしょうか？
cssじゃない方法などもあるのでしょうか？よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2014/07/31 08:25

そのままのHTMLでしたら単純に

input[name="figure"]{position:relative;left:30px;top:-20px;margin-left:-20px;}

＞できれば、大きさも変えたいと考えています。
★inputなどUI(ユーザーインターフェースに関わる部分はデザインを変えてはなりません。

HTMLが不正なので、ちゃんとマークアップすれば変わります。

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
やりたいことができました。

通報する

お礼日時：2014/08/04 08:12

No.1

回答者： LancerVII
回答日時：2014/07/31 07:49

こんにちは。

位置や大きさは微調整してください。
css以外ででやるとしたら昔多用されていたtableを使って、背景画像を分割すればそれっぽいのは出来ると思います。
ただ、チェックボックスの大きさを変えるのにcssを使うと思いますので、cssでやればいいと思います。

<html lang="ja-JP">
<head>
<style type="text/css">
img { border: solid 1px #000; }
ul li { list-style: none; position: relative; margin: 3px 0; }
ul li input { position: absolute; bottom: 2px; left: 2px; width: 30px; height: 30px; }
</style>
</head>
<body>
<ul>
<li>
<img src="test.png" width="150" height="150" alt="test">
<input type="checkbox" name="test" value="1">
</li>
<li>
<img src="test.png" width="150" height="150" alt="test">
<input type="checkbox" name="test" value="2">
</li>
<li>
<img src="test.png" width="150" height="150" alt="test">
<input type="checkbox" name="test" value="3">
</li>
<li>
<img src="test.png" width="150" height="150" alt="test">
<input type="checkbox" name="test" value="4">
</li>
<li>
<img src="test.png" width="150" height="150" alt="test">
<input type="checkbox" name="test" value="5">
</li>
</ul>
</body>
</html>