Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

要件

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

全体の要点

  1. [HTML] labelタグでinput[type="checkbox"]タグと代替の要素(spanなど)をラッピングしてマークアップ
  2. [CSS] [type="checkbox"]を非表示にしする
  3. [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以前のブラウザで閲覧した際は、ブラウザ固有のチェックボックスが表示されます。

参照記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした