全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
CSSでラジオボタン・チェックボックスをデザイン装飾する
2019.04.17
※この記事は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タグを利用して擬似的にパーツを作ることになります。
工夫次第で、様々な装飾が可能です。
是非、ご活用ください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
