cssのみで作るシンプルなチェックボックスの紹介です。
HTML本体のフォーム部品は、パソコン、スマホなどの環境によって形が変わったり、デザインを加えたりは出来ないので、今回紹介するチェックボックスを叩き台にデザインを調整してみてください。
チェックボックスデザインは、ラベルと疑似要素を使う
cssでデザインするチェックボックスの多くは、ラベルと疑似要素を使用して作られています。
ラベル（label）とは
ラベルとは、<label></label>タグのこと。
ラベルにfor属性をチェックボックスのid属性を紐づけることで、チェックボックスと同じ役割を持つ要素として動かすことが出来ます。
具体的な例として、下記のソースコードと実行例を用意しました。
<input type="checkbox" id="test" /> <label for="test">チェックボックス</label>
通常チェックボックスは、□のボックスをクリックしないとチェックが付きませんが、「チェックボックス」という文字をクリックしても、チェックが切り替わっています。
これは、<label></label>で囲った「チェックボックス」という文字にも、formのチェックボックスとして同等の関連付けがされているからです。
疑似要素（::before、::after）とは
オリジナルの四角枠やチェックを作るために、before、afterの疑似要素を使用します。
疑似要素をcssで設定することにより、labelの前後に設定した要素を自動挿入することが出来ます。
今回は、beforeはチェックボックスの□、afterはレ点のチェック（チェックが入っている場合のみ）を作ることでデザインを再現します。
ソースコード
では実際に、オリジナルチェックボックスのソースコードをご紹介します。
HTML
<div class="mycheckbox">
<input id="sample1" value="1" type="checkbox" checked><label for="sample1">チェック1</label>
<input id="sample2" value="1" type="checkbox"><label for="sample2">チェック2</label>
<input id="sample3" value="1" type="checkbox"><label for="sample3">チェック3</label>
</div>
classの「mycheckbox」で囲われた要素を、オリジナルcssで作られたチェックボックスとして反映させます。
inputのid属性とlabelのfor属性を紐づけする必要があるので注意してください。
また、同一のidを複数箇所で使用はNGです。
CSS
/* 元々のチェックボックス（非表示） */
.mycheckbox input[type="checkbox"]{
display: none;
}
/* チェックボックスの代わりを成すラベル */
.mycheckbox input[type="checkbox"]+label{
display: none;
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
padding-right: 10px;
}
/* ラベルの左に表示させる正方形のボックス□ */
.mycheckbox input[type="checkbox"]+label::before{
content: "";
position: absolute;
display: block;
box-sizing: border-box;
width: 20px;
height: 20px;
margin-top: -10px;
left: 0;
top: 50%;
border: 1px solid;
border-color: #585753; /* 枠の色変更 お好きな色を */
background-color: #FFF; /* 背景の色変更 お好きな色を */
}
/* チェックが入った時のレ点 */
.mycheckbox input[type="checkbox"]:checked+label::after{
content: "";
position: absolute;
display: block;
box-sizing: border-box;
width: 18px;
height: 9px;
margin-top: -9px;
top: 50%;
left: 3px;
transform: rotate(-45deg);
border-bottom: 3px solid;
border-left: 3px solid;
border-color: #585753; /* チェックの色変更 お好きな色を */
}
::before、::afterを使用して、チェックボックスのボックスとレ点のチェックをcssで再現します。
お好きな色を、と書かれたところは、サイトに合わせた自由な色を設定することが出来ます。
デモ
上記のHTMLとCSSを実際にデザインを反映させたものがこちらです。
なるべくシンプルに、それでいて押しやすい仕様としました。
パソコン、スマホ共に同一の挙動となるため、ブラウザによって変化されるデフォルトのformよりもデザインの統一性に優れています。
色変更デモ
チェックの色を変えてみたパターンも用意しました。
掲載するサイトのイメージカラーに合わせることで、ちょっとおしゃれなデザインとしてみせることが出来ますね。
形変更デモ（丸くする）
border-radiusを「50%」に設定することで、チェックの枠を丸くすることが出来ます。
.mycheckbox input[type="checkbox"]+label:before{
border-radius: 50%;
}
「自由にデザインできる」「ブラウザ間の仕様に依存しない」という点で、チェックボックスのデザインのcssで作ることにはメリットがあります。
フォームの常習的に使うサイトやツールでは導入を検討してみてはいかがでしょうか。
また、こちらの記事では「アプリ風チェックボックス」という、かなり形を変えたチェックボックスの作り方も解説しています。
コメント