こんにちは、エムフィールド広島オフィスのフロントエンドエンジニアのかみーゆです。 ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね? 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。 ズバリ、labelタグを使う ラジオボタン や チェックボックス などに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「 label 」タグです。 「 label 」とは、 チェックボックス 、 ラジオボタン などの 構成部品とその項目名を関連付けるためのタグ です。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 指定方法その1・