[CSS] チェックボックスをオリジナルデザインにカスタマイズする際のまとめ #CSS

cssのみでinput要素のcheckbox属性のデザインをカスタマイズする際の、方法と注意点などのまとめ。

要件

cssで装飾できないcheckbox属性の代わりに、装飾用の要素（spanなど）を内包したlabelタグを使用して装飾を行う
idやforの紐付けは必要ない
擬似クラス（CSS3）を使用するので、未対応のIE8以前のブラウザでは元のinput要素がそのまま表示される様にする

全体の要点

[HTML] labelタグでinput[type="checkbox"]タグと代替の要素（spanなど）をラッピングしてマークアップ
[CSS] [type="checkbox"]を非表示にしする
[CSS] 疑似属性／擬似クラス（befoer要素、checkedクラスなど）を用いてinputの代替要素（spanなど）にチェックボックスのデザインをCSSで作成する

HTML

html

<label class="c-checkbox">
    <input type="checkbox"></input>
    <span class="c-checkbox__input"></span><!-- 代替要素 -->
</label>

装飾をする為の要素、"span.c-checkbox__input"をlabelタグの中に内包します。

CSS

css

/* input要素の代替 */
.c-checkbox__input{
    position: relative;
    display: block;
    vertical-align: bottom;
    width: 20px;
    height: 20px;
}
.c-checkbox__input::before,
.c-checkbox__input::after{
    content: "";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* input要素の代替（外側） */
.c-checkbox__input::before{
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    top: 0;
    left: 0;
}

/* 本来のinput[type="checkbox"]を非表示 */
.c-checkbox input[type="checkbox"]{
    display: none;
}

/* input要素の代替（外側）：チェック後 */
.c-checkbox input[type="checkbox"]:checked + .c-checkbox__input::before{
    background-color: #fcfcfc;
    border-radius: 4px;
}

/* input要素の代替（内側）：チェック後 */
.c-checkbox input[type="checkbox"]:checked + .c-checkbox__input::after{
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    top: 5px;
    left: 5px;
}

本来のinput要素".c-checkbox input[type="checkbox"]"を非表示にし、
代替要素の"span.c-checkbox__input"に対してcssで装飾を行います。

チェックボックスを選択したか否かは、擬似クラス"checked"で判別しています。
そして、
"checked"されたinput要素に隣接( + )した代替要素にチェックのデザインを当てることでチェック済を表現します。

この為、htmlの構造では必ずinput要素と代替要素は隣接する形を崩さない様に気をつけてください。

IE8以前のブラウザを考慮

メディアクエリがIE8以前のブラウザに対応していない点を利用し、
チェックボックスのデザインを設定しているstyleを、メディアクエリを使用して書き分けます。

css

@media (min-width: 1px) {
  /* 〜デザインカスタマイズの記述（上記のcss）のみ、こちらに書く */
}

メディアクエリの記述で囲った部分はIE8以前のブラウザでは対応していない為、
無視されます。

したがって、
IE8以前のブラウザで閲覧した際は、ブラウザ固有のチェックボックスが表示されます。

[CSS] チェックボックスをオリジナルデザインにカスタマイズする際のまとめ

要件

全体の要点

HTML

CSS

IE8以前のブラウザを考慮

参照記事