{{ item.count }}

CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた

2020.03.01カルアカスタッフ

{{ item.count }}

こんにちは、リードスペースです。
ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね？

今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。

ざっくりいうと・・・・・

labelタグの使い方
CSSをおさらい・仕組みを学ぶ
ラジオボタンやチェックボックスを実際にカスタマイズ(コードあり)
色んなパターンでカスタマイズ

ズバリ、labelタグを使う

ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。
そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。
「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。
関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。

指定方法その1・フォームパーツのidとlabelタグのforの値を同じにする

下記のようにidとforの値を同じにすればそれぞれを関連付けることができます。
もちろん、idなので他のパーツと値は重複不可です。

[code title=”html”]
<input id=”form01″ type=”radio”>
<label for=”form01″>ラジオ01</label>
[/code]

指定方法その2・labelでフォームパーツをラッピング

labelタグで内包します。idなど紐付ける必要ないので記述も少なくなりますし、簡単ですね。

[code title=”html”]
<label><input type=”radio”>ラジオ01</label>
[/code]

CSSをおさらい

labelタグを利用して擬似的にパーツを作ります。 CSSの擬似セレクタ、擬似要素、擬似クラスなどを利用しますので、それらの仕組みは理解しておいた方が良いです。それでは、おさらいしてみましょう。

隣接セレクタを理解する

隣接セレクタ(E + F)とは要素と要素が直接隣接している場合（直後の要素）に適用されるセレクタです。要素と要素の間に別の要素が有る場合はダメ。

擬似要素、before/afterを理解する

beforeは要素内の一番前に好きな文字を追加でき、逆にafterは一番最後に追加できます。

ちなみに要素::擬似要素と間にコロン二つつけて記述します(CSS3)。
IE8以下ではコロン二つに対応していませんが、現在IE8はサポート切れてるのでいいんじゃないかな^ ^;
before/afterを使う時のポイントはcontentプロパティに必ず値が必要で、あくまで指定した要素内に追加されるということを理解しておきましょう。
仕様方法が分かればCSSだけでもかなり表現できることが広がります。