CSSとFontAwesomeだけでチェックボックス・ラジオボタンをデザインする

表示サンプルはこちら
http://jsdo.it/goto_jp/o1XT

OSやブラウザ、PC/スマホで何かと表示に差異があり扱いの面倒なチェックボックス・ラジオボタンをWebFontのメジャーどころ「FontAwesome」を利用しフォントアイコン化します。JSも画像も使わず、FontAwesomeを利用していればHTTPリクエストも増えず軽いです。

HTML

<input type="checkbox" id="check1"><label for="check1">チェック1</label>
<input type="radio" name="radio" id="radio1"><label for="radio1">ラジオ1</label>

CSS（Sass記法）

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
label {
    display:inline;
    cursor:pointer;
}
$inputColor:#999;
$inputChecked:#09c;
input[type=checkbox] {
    display:none;

    + label {
        &:before {
            display:inline-block;
            width:16px;
            font-family: 'FontAwesome';
            content:"\f096";
            font-size:14px;
            color:$inputColor;
        }
    }
    &:checked + label {
        &:before {
            content:"\f046";
            color:$inputChecked;
        }
    }    
}
input[type=radio] {
    display:none;

    + label {
        &:before {
            display:inline-block;
            width:16px;
            font-family: 'FontAwesome';
            content:"\f10c";
            font-size:14px;
            color:$inputColor;
        }
    }
    &:checked + label {
        &:before {
            content:"\f192";
            color:$inputChecked;
        }
    }    
}

解説

1. FontAwesomeをインポート（ローカルファイルからの方が好ましい）
2. チェックボックス、ラジオボタンを消す
3. 隣接するlabelのbeforeを実体化し、FontAwesomeの表示したいcontentを指定
4. チェック状態により3のcontentを変える

checkboxとradioはcontentの内容が違うだけで同じ記述なので、記述をもっと最適化しても良いと思います。