CSSでチェックボックスをカスタマイズしてみる

Webページにチェックボックスを配置する際、
デフォルトのデザインではページの雰囲気とあわないということもあるかと思います。
そんなときにチェックボックスをカスタマイズする方法について簡単に書いてみます。

今回はCSSでカスタマイズする方法です。

次のような通常のチェックボックスがあります。

選択

[html]

<label>
    <input type="checkbox" class="checkboxsample" />
    <span>選択</span>
</label>

例えばこれを、以下のようなデザインにしてみます。
・非選択時 → 白の背景色、「選択されていません。」と表示
・非選択時 → 黄色の背景色、「選択されています。」と表示

選択

[css]

/* (1) デフォルトのチェックボックスを非表示にする */
input[type=checkbox].checkboxsample {   
    display: none;    
}

/* (2) チェックボックスのデザイン(白の背景色にする) */
input[type=checkbox].checkboxsample + span {   
    background-color: white;
    border-radius: 2px;
    border: 1px solid #dddddd;
    padding: 5px 8px;
}

/* (3) チェックボックスのデザイン(選択されていません。と表示する) */
input[type=checkbox].checkboxsample + span:after {   
    content: "されていません。";
}

/* (4) チェックボックス選択時のデザイン(黄色の背景色にする) */
input[type=checkbox].checkboxsample:checked + span { 
    background-color: rgb(255, 255, 153);
}

/* (5) チェックボックス選択時のデザイン(選択されています。と表示する) */
input[type=checkbox].checkboxsample:checked + span:after { 
    content: "されています。";
}

となります。

ポイントは、

・デフォルトのチェックボックスを非表示にする
・labelタグで囲む
・CSSの隣接セレクタ、疑似クラスを使う

です。