CSSでinputのcheckboxをデザインする（チェックボックス）
inputのcheckboxのチェックマークは直接CSSなどで変更する事ができません。
デザインを改変するにはinput自体は非表示にし、チェックマークをCSSで自作する事になります。
labelタグを隣り合わせて、beforeとafter属性でチェックマークを作ります。
inputのチェックマークをCSSで作る
inputタグのcheckboxを設置すると、項目にチェックマークが表示されるようになりますよね。
実はこのチェックマーク部分については、CSSで直接デザインを変更する事ができない様になっています。
そこで本記事では、チェックマークをCSSで自作スタイリングする方法についてご紹介します。
作成の大まかな流れ
先述した様にcheckboxのチェックマークは、背景色やレ点のデザインを直接変更する事ができません。
ではどうするのかというと、通常のを使わずにチェックマークを自作する訳です。
四角の背景やレ点自体を、CSSでデザインする事になります。
自作したチェックマークであっても、きちんとON・OFFする事ができます。
※厳密にはON・OFFごとにレ点の入ったデザインと入っていないデザインとを作ります。
本物のcheckboxは非表示
まずはtypeがcheckboxとなっているinputタグ部分を丸ごと非表示にします。
input[type=checkbox]{ display: none; }
これでチェックマーク自体は全く見えなくなります。
代わりに、同じ位置に別途作ったチェックマークを表示させる訳です。
labelタグの設置
このinputタグと一緒によく使われるのが、labelタグですね。
前後をlabelで囲む事によって、チェックマークの外にある「項目部分」もクリックの対象範囲になります。
ソース例
<label for="aaa"><input type="checkbox" id="aaa" name="" value="項目テキスト">項目テキスト</label>
この様にしておくと項目テキスト部分をクリックしても、チェックマークが入ってくれるようになります。
スマホなど、指で比較的大きな範囲をタップする場合には必須です。
今回はinputの代わりにlabelタグを使って、チェックマークのデザインを構成する事になります。
labelタグCSSデザイン
ではHTMLとCSSの各ソース例を紹介します。
inputとlabelを隣り合わせる
HTMLソース
<input type="checkbox" id="aaa" name="" value="項目テキスト"><label for="aaa">項目テキスト</label>
今回はlabelタグの外にinputタグを出しています。ここがコツです。
inputタグは非表示にするので必要無い様に思いますが、formとしてのデータ格納・送信のために必要です。
外に出してlabelを隣り合わせで記述する事で、CSSの「+」セレクタが使える様になります。
「+」とは
+は隣接セレクタと呼ばれるものです。
要素同士を結合子「+」で結ぶ事で、要素の直後に出現する要素に対してスタイルを指定することができます。
今回の場合inputのすぐ後ろにあるlabelタグが対象になりますね。
この時、inputとlabelはそれぞれ隣り合っていないといけません。
labelを外に出したのはそのためであり、外に出してもidでつながっているのでデータはきちんと格納されます。
before・after属性でチェックマークを構成
次にCSSのデザイン例をご紹介しましょう。青色の背景に白字のレ点が入ったチェックマークを作ります。
具体的にはbefore属性とafter属性を利用していきます。
隣接セレクタの「+」を入れて、inputのcheckboxに続くlabelタグを指定します。
CSS
input[type=checkbox]{ display: none; } input[type=checkbox] + label { box-sizing: border-box; cursor: pointer; padding: 5px 20px; position: relative; width: auto; } input[type=checkbox] + label::before { position: absolute; top: 50%; left: 5px; display: block; margin-top: -8px; width: 14px; height: 14px; content: ''; background: #0075ff; border-radius: 4px; } input[type=checkbox] + label::after { border-right: 2px solid #fff; border-bottom: 2px solid #fff; content: ''; display: block; height: 7px; left: 8px; margin-top: -7px; position: absolute; top: 50%; transform: rotate(45deg); width: 5px; }
「+」により、inputに隣り合うlabelが指定されています。
サンプル
今はチェックを押しても変わりませんが、チェックマーク自体はデザインできていますね。
CSSの解説
まずlabelをbeforeやafterのベース位置として定義します。
もしlabelが改行される場合は、display: inline-block;を入れるなどして対処しましょう。
次にbefore属性を入れて、背景色の丸角付き四角形が上に重なる様に作っています。
さらにafter属性を入れて、レ点マークをさらに上に重ねます。
レ点マークはborder-rightとborder-bottomでまず「_l」を作り、transformでこれを45度に傾けて「レ」のマークを表現しています。
絶対配置の数値やmarginのマイナスなどは、そのチェックマークの大きさによって微調整しなければなりません。
実際に作るときのサイズに応じて適宜変更しましょう。
デフォルトデザインに近い
上記のデザインはデフォルトのcheckboxのデザインに近い表現にしています。
初期設定とあまり違いが無いので、必要に応じて思い切りデザインを変更しても構いません。
多彩なチェックマークができますので、試してみて下さいね。
チェックON・OFFのデザイン変更
上記のCSSスタイルはあくまで、チェックが付いた時のデザインですよね。
基本的にcheckboxは常にチェックの付け外しが行われます。
つまりチェックがOFFの時のデザインも必要になり、チェックがONになったら上記のCSSが反映されないといけません。
checkedを付けたCSSの編集
まずは上記CSSの命令部分の全てに:checkedを入れましょう。
:checkedはcheckboxにチェックマークが入った時の状態を指します。
これにより先ほどのCSSは「チェックON時限定」のデザインとなります。
checkedを追加したCSS
input[type=checkbox]:checked {…} input[type=checkbox]:checked + label {…} input[type=checkbox]:checked + label::before {…} input[type=checkbox]:checked + label::after {…}
上記の「…」は先述と同様のCSSが入りますので省略しています。
こうする事で、チェックがONになっている場合にのみCSSが適用されますね。
チェックOFF時は通常のデザインを採用
上記の様に全てにcheckedを入れると、チェックがOFFの時はcheckboxのinputタグ自体がdisplay: none;になりません。
つまりデフォルトのチェック枠が表示された状態になります。
これにより通常のチェックOFF時のデザインをそのまま利用した事になります。
チェックON時のチェックマークは自作している訳ですから、表示位置にズレが無いように確認しましょう。
サンプル
チェックが付け外しができ、OFFのデザインはデフォルトのデザインです。
チェックOFFの時のデザインも変えたい
チェックが付いていない時のデザインもあわせて変更したい場合は両方設定するだけです。
:checkedを付けてない場合のCSSも別途準備し、それぞれに別スタイルを適用する事になります。
ON時とOFF時のCSSを用意
inputは初期状態から非表示
まず最初のinput[type=checkbox]だけはcheckedを外し、display: none;とします。
これでON・OFFに関係なくデフォルトのinputは見えなくなります。
input[type=checkbox] { display: none; }
チェックOFF時のlabelセレクタ
input[type=checkbox] + label {…} input[type=checkbox] + label::before {…} input[type=checkbox] + label::after {…}
チェックON時のlabelセレクタ
input[type=checkbox]:checked + label {…} input[type=checkbox]:checked + label::before {…} input[type=checkbox]:checked + label::after {…}
それぞれで背景色の色を変えたりして、はっきり区別をつけるようにしましょう。
基本はチェックOFFは暗目の目立たない配色で、チェックを付けた事が明確になる様に差別化した方が良いと思います。
opacityでコントロール
基本的にチェックがOFFの時、レ点は見えないのが普通です。
ですのでチェックOFF時のafter属性は、設定したデザインに加えてopacity: 0;にしておきましょう。
input[type=checkbox] + label::after { … opacity: 0; }
その上でチェックONになった時、つまり:checkedのafter属性でopacity: 1;としておくのです。
input[type=checkbox]:checked + label::after { … opacity: 1; }
そうする事でチェックがONになった時だけレ点が表示されるようになります。
サンプル
チェックマークのデザインを変える理由
現場で一番遭遇したのは、disabledが設定された時のcheckboxのデザインです。
input系はブラウザごとに多少デザインに違いはありますが、デザインがまずい訳ではありません。
例えばWEBシステムの構成ページで「表示はするが編集は不可」ページが頻出します。
その場合はinputタグにdisabledを入れて、中身を書き換えたりチェックを付け外しできない様に規制する訳ですね。
disabledはグレー色が多い
このdisabledが設定された際、ほとんどが薄暗いグレー色のデザインになります。
いかにも「変更できませんよ」とアピールしたデザインですが、これが「チェックが付いているのかどうかわからない」と言われがちなのです。
利用するクライアントのために、チェック自体のデザインを変更してあげる事もサービス品質でしょう。
※disabledを入れていればクリックしても反応しないので、安心ではあります。
今回は、入力不可でもデザインは通常通りのチェックが入った状態を実現したかった事が理由です。
もちろん単にデザイン変更したい場合もあるでしょうから、存分に活用して下さい。
