<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の情報サイトから、まとめて検索