チェックボックスの使用方法
チェックボックスは、HTMLの<input type="checkbox">で作ります。
チェックボックスを設置するときには、name属性と、value属性を設定します。
| 属性名 | 説明 |
|---|---|
| name | チェックボックスの名前を設定 |
| value | 1つ1つのチェックボックスの値を設定 |
labelタグとの組み合わせ
通常は、チェックボックスだけの場合は稀で、横にテキストなどがあるかと思います。その際に、<label>タグと組み合わせて使用することで、テキストをクリックしたときにもチェックボックスが選択できるようになります。
checked属性でデフォルトでチェックされた状態にする
初期状態でチェックボックスがチェックされた状態にしたい場合は、checked属性を使用します。
キーボード操作でチェックボックス選択する
チェックボックスは、キーボード操作で選択できます。フォーカスの切り替えにはTabキーとShiftキーを使います。チェックボックスを選択するにはSpaceキーを押します。
CSSでチェックボックスのスタイルを変更する
チェックボックスの見た目はブラウザによって異なります。各ブラウザで見ても統一した見た目にするためには、CSSでチェックボックスのスタイルを変更します。
CSSでスタイルを変更するうえでの注意点は、inputタグをdisplay: noneで非表示にしないことです。display: noneにすると、先述のキーボード操作で選択ができなくなるのでスタイルを変更する際は注意しましょう。
以下で、実装のポイントを解説します。
ブラウザごとの見た目とCSSの制御を除去する
appearanceプロパティをnoneにすることで、ブラウザごとの見た目とCSSの制御を除去します。widthとheightでチェックボックスのサイズを調整します。
.c-checkbox__input {
position: relative;
width: 24px;
height: 24px;
appearance: none;
border: solid 1px #000;
border-radius: 4px;
}
ここで、チェックマークの位置を調整するために、position: relativeを設定しています。
チェックマークを疑似要素で作る
チェックマークは、疑似要素で設定します。
ここでは、maskプロパティを使って、チェックマークのSVG画像を設定します。
.c-checkbox__input {
/* チェックマーク */
&::before {
content: "";
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0;
mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4%2010.8889L10.0714%2017L21%206%22%20stroke%3D%22white%22%20stroke-width%3D%224%22/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: contain;
background: #FFF;
transition: opacity 0.3s;
}
}
チェックが入ってから表示するために、初期状態ではopacityを0にして非表示にしておきます。
チェックボックスを選択したときのスタイルを設定する
選択された状態は、CSSでは:checkedという疑似クラスを使って設定します。
.c-checkbox__input {
&:checked {
background: #53C197;
}
&:checked::before {
opacity: 1;
}
}
:checkedの時に、チェックボックスの背景を緑にし、チェックマークのopacityを1にして表示します。