<input type="checkbox">
使用例
<label><input type="checkbox" />check1</label> <label><input type="checkbox" />check2</label> <label><input type="checkbox" />check3</label>
属性
readOnly
HTML5ではtypeがcheckboxなどの要素では、readOnlyの指定が無視されます。Properties - HTMLInputElement - Web APIs | MDN
チェックボックスの拡大
既定では表示サイズが小さくマウスではクリックしにくいため、サイズを大きくする方法を考えます。
クリックの領域を拡大するには、label要素と関連付けます。Providing a bigger hit area for your checkboxes - <input type="checkbox"> - HTML: HyperText Markup Language | MDN
| 方法 | サイズ指定 | 適用例 |
|---|---|---|
| 1 | 未指定 | |
| 2 |
width:100px; height:100px; |
|
| 3 |
background-color:red; |
|
| 4 |
width:100px; height:100px; background-color:red; |
ブラウザによる違い
ブラウザによっては表示上の変化はありませんが、CSSのwidth、heightを指定することでクリックできる領域は拡大されます。
| 方法 | IE9 | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 1 |  |
 |
 |
 |
 |
| 2 | |||||
| 3 | |||||
| 4 |
参考
HTMLの情報サイトから、まとめて検索