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の隣接セレクタ、疑似クラスを使う

です。

○デフォルトのチェックボックスを非表示にする

上記cssの(1)の部分です。
デフォルトのチェックボックスを非表示にし、チェックON/OFF機能のみ使用します。

○labelタグで囲む

上記htmlの部分です。
labelタグでinputと関連付けることによって、label押下時に「チェックボックスを押した時と同じ動き」をするようになります。

labelタグは、囲まなくてもinputタグのidをforで指定して使用することもできます。

○CSSの隣接セレクタ、疑似クラスを使う

今回のテーマの一番重要な部分です。

隣接セレクタは、上記cssの(2)～(5)の 「 + span 」の部分です。
これは、「チェックボックスの直後のspan要素」を指定しており、
この要素に対して、背景色や文字追加といったデザインをしています。

疑似クラスは、上記cssの(4)、(5)の「 :checked 」の部分です。
これで、「選択された状態」のみに限定しています。

これによって、
カスタマイズしたデザインをチェックボックスの状態によって切り替えることを実現しています。

今回は簡単なサンプルで背景色と文字を切り替えていますが、
代わりに画像であったり、工夫次第でさまざまなデザインのチェックボックスを作ることができます。