<label><input type="checkbox" />check1</label> <label><input type="checkbox" />check2</label> <label><input type="checkbox" />check3</label>
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 |