Web blog WEBブログ

CSSでのラジオボタン・チェックボックスを装飾する

2019.04.17

こんにちは。コーダーの兼山です。

ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できません。
そこで、別の視点からCSSを駆使して、オリジナルでカスタマイズする方法をご紹介します。

ラジオボタンを装飾する

チェックボックスを装飾する

備考:ラジオボタン・チェックボックスの装飾は『labelタグ』をつかいましょう

labelタグは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。
関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。

【ポイント①】
フォームパーツのidとlabelタグのforの値を同じにする
(今回のサンプルは、このパターンで紹介しています。)

例)
<input id=”form” type=”radio” />
<label for=”form”>ラジオボタン01</label>

【ポイント②】
labelタグでフォームパーツをラッピングすることでも、今回の例と同じ動きをします。
labelタグで内包することで、idなど紐付ける必要が無くなります。

例)
<label><input type=”radio” />ラジオボタン01</label>

まとめ

考え方としては、labelタグを利用して擬似的にパーツを作ることになります。
工夫次第で、様々な装飾が可能です。

是非、ご活用ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口