CSS3の 隣接セレクタ、属性セレクタ、擬似セレクタの合わせ技で input[type=checkbox]:checked + label の書式を駆使すると、スタイルシートだけでcheckboxやradioのデザインを変更できます。 CSS3のセレクタに対応していないIE8以下では 通常のラジオボタンやチェックボックスが表示されます。 応用編で、cssだけでラジオボタンを2択スイッチに変更も紹介しています。 htmlの構成は inputの次にlabelを配置し、idとforで連動させるようにしておきます。 <div class="sample"> <div> <input type="radio" name="sample-radio" checked="checked" id="radio-1" /><label for="radio-1">radio 1</label> <input
![cssだけでcheckboxやradioのデザインを変更](https://cdn-ak-scissors.b.st-hatena.com/image/square/ab1721eb19d5875f54ce162af7ed500c60ecfc01/height=288;version=1;width=512/http%3A%2F%2Fwebdev.jp.net%2Fwp-content%2Fuploads%2F2014%2F05%2Fcheckbox-radio-custom-css.png)