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

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

【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に任意の画像を置けば、オリジナルのチェックボックスやボタンにもできます。