こんにちは、リードスペースです。 ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね? 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。 ズバリ、labelタグを使う ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 指定方法その1・フォームパーツのidとlabelタグのforの値を同じにする 下記のようにidとf
![CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた | カルアカはWebが無料で学べる](https://cdn-ak-scissors.b.st-hatena.com/image/square/64882c2d217f2dbfe13e0fcb03da6a14b98e2b95/height=288;version=1;width=512/https%3A%2F%2Fcultureacademia.jp%2Fwp-content%2Fuploads%2Ffacebook_ogp.png)