CSSのみでcheckboxやradioの見た目を変える

Javascriptを使わず、CSSのみでcheckboxやradioの見た目を変更するための小技?です。
※CSS3を利用してるのでIEは9以降じゃないと適用されないと思います。

img01.png

【CSS部分】

#Radio input[type=radio] {
display: none;
}

#Radio input[type=radio] + label:before {
display: block;
content: '';
float: left;
width: 14px;
height: 14px;
margin-right: 0.5em;
background-color: whitesmoke;
border: 1px solid gainsboro;
border-radius: 1em;
}

#Radio input[type=radio]:checked + label:before {
background-color: royalblue;
border-color: royalblue;
}

【HTML部分】

<ul id="Radio">
<li>
<input type="radio" name="Radio" id="Radio-1" value="Radio-1">
<label for="Radio-1">Radio-1</label>
</li>
<li>
<input type="radio" name="Radio" id="Radio-2" value="Radio-2">
<label for="Radio-2">Radio-2</label>
</li>
<li>
<input type="radio" name="Radio" id="Radio-3" value="Radio-3">
<label for="Radio-3">Radio-3</label>
</li>
<li>
<input type="radio" name="Radio" id="Radio-4" value="Radio-4">
<label for="Radio-4">Radio-4</label>
</li>
</ul>

標準のradioやcheckboxを非表示にして、代わりにlabelの前に:beforeで挿入しています。
backgroundに任意の画像を置けば、オリジナルのチェックボックスやボタンにもできます。




この記事へのコメント


この記事へのトラックバック