【CSS】チェックボックスのカスタマイズ方法【コピペOK】

記事内に広告を含みます

パソ君

・チェックボックスをカスタマイズしたいけどどうするの？

こんな疑問にお答えします。

お問い合わせフォームなどで使うチェックボックスですが、デフォルトでは下記のようになっていますよね。

ただ案件によっては、このチェックデザインを変更したい場合があります。

どうやってカスタマイズするんだ？と思うはず。

ただ以外とCSSのみで実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「チェックボックスのカスタマイズ方法」について解説していきます！

この記事でわかること

・チェックボックスのカスタマイズ方法
・チェックボックスのカスタマイズ方法【画像利用編】

【CSS】チェックボックスのカスタマイズ方法【コピペOK】
【CSS】チェックボックスのカスタマイズ方法【画像利用編】
- 追記したコード
【CSS】チェックボックスのカスタマイズ方法【コピペOK】：まとめ

【CSS】チェックボックスのカスタマイズ方法【コピペOK】

カスタマイズしたチェックボックスのサンプルがこちらになります。

See the Pen ➀チェックボックスのカスタマイズ by jito-coder (@jito-coder) on CodePen.

クリックしたら紺色のチェックマークが表示されますよね。

<label class="check-box">
    <input type="checkbox" name="sample">
    <span class="check-box__text">チェックボックス</span>
</label>

input[type=checkbox] {
    display: none;
}

.check-box__text {
    display: inline-block;
    padding: 3px 0 3px 40px;
    cursor: pointer;
    position: relative;
}

.check-box__text::before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 27px;
    padding-top: 27px;
    top: 0;
    left: 0;
    border: 1px solid #111;
}

.check-box__text::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 20px;
    padding-top: 10px;
    top: 5px;
    left: 4px;
    border-left: 2px solid #000066;
    border-bottom: 2px solid #000066;
    transform: rotate(-45deg);
    opacity: 0;
}

input[type=checkbox]:checked + span::after {
    opacity: 1;
}

カスタマイズする手順としてはこちら↓

labelタグでinputタグとspanタグを囲む
デフォルトのinputタグを非表示に
spanタグに疑似要素を追加
チェックしたら疑似要素を見えるように

順に見ていきましょう！
（※このカスタマイズ方法はあくまで一例です）

➀：labelタグでinputタグとspanタグを囲む

まずHTMLの組み立てですが、inputタグとspanタグをlabelタグで囲むように作成します。

<label class="check-box">
    <input type="checkbox" name="sample">
    <span class="check-box__text">チェックボックス</span>
</label>

これでspanタグをクリックしても、チェックボックスタイプのinputタグが反応するようになりました。

➁：デフォルトのinputタグを非表示に

次にクリックしたら出てくるデフォルトのチェックマークを非表示にしましょう。

下記コードを記述すればOK。

input[type=checkbox] {
    display: none;
}

➂：spanタグに疑似要素を追加

そしてspanタグに疑似要素を追加します。

この疑似要素を使って、カスタマイズしたチェックマークを反映するという仕組みです。

beforeを使い、チェックマークの枠部分を作成。

.check-box__text::before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 27px;
    padding-top: 27px;
    top: 0;
    left: 0;
    border: 1px solid #111;
}

afterを使いチェックマーク部分を作成。

.check-box__text::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 20px;
    padding-top: 10px;
    top: 5px;
    left: 4px;
    border-left: 2px solid #000066;
    border-bottom: 2px solid #000066;
    transform: rotate(-45deg);
    opacity: 0;
}

beforeとafterの位置を調整することで、下記のようなカスタマイズされたチェックマークが反映できます。

afterの初期値は非表示にしておこう

label部分をクリックした時にチェックマークが表示されるようにしたいので、afterの初期値は非表示にしておきましょう.

.check-box__text::after {
    // ~~
    opacity: 0;
}

➃：チェックしたら疑似要素を見えるように

あとはlable部分をクリックした時に、先ほどのafter疑似要素を表示するようにすれば実装完了です。

やり方としては下記コードを記述するだけ。

input[type=checkbox]:checked + span::after {
    opacity: 1;
}

このコードを簡単に説明すると
「[type=checkbox]のinputタグがチェックされたら、直後に隣接してるspanタグのafterを、opacity: 1;にする」
という意味。

つまりlabelで囲まれてる部分をクリックしたら、先ほどカスタマイズして表示したチェックマークが反映されるということです。

これでカスタマイズしたチェックボックスの完成！

【CSS】チェックボックスのカスタマイズ方法【画像利用編】

先ほどは疑似要素でチェックマークをcssで作成しました。

ただデザインによっては画像を利用する場合もあるはず。

そこで画像を利用してカスタマイズしたチェックボックスを紹介していきます。
そんなサンプルがこちら↓

See the Pen ➁チェックボックスのカスタマイズ by jito-coder (@jito-coder) on CodePen.

クリックしたら僕のアイコンが表示されますよね。

追記したコード

afterに対しての記述を変更しました。

borderを使うのではなく、background-imageを使い画像を反映。

.check-box__text::after {
    content: '';
    display: inline-block;
    position: absolute;
    background-image: url(https://jito-site.com/wp-content/uploads/2023/01/jito-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 35px;
    padding-top: 35px;
    top: -3px;
    left: -2px;
    opacity: 0;
}

この方法なら画像を利用しないとカスタマイズできないチェックボックスも実装可能です！