【CSS】チェックボックスを装飾する

.
CSSでチェックボックスを装飾する方法について記します。

Contents

フォーム要素は装飾しにくい
HTML
CSS
デモ
ソースコード全文

フォーム要素は装飾しにくい

フォームの要素（チェックボックス・ラジオボタン・セレクトボックス）などは要素自体にCSSを適用してもあまり見た目が変更できません（accent-colorで色ぐらいは変えれるようですが）。

ではどうするかというと疑似的にチェックボックスを作成して、元のチェックボックスと連動させるという方法をとります。

HTML

label要素でinput[type=checkbox]を囲んだシンプルなHTMLです。
ひとつ違うのはdummyクラスがついている要素で、これが疑似チェックボックスになります。

<label class="deco-check">
    <input type="checkbox" name="sample_check">
    <span class="dummy"></span>
    サンプルチェック
</label>

CSS

CSSはこのようになります。
4~11行目でボックスを、12~19行目でチェックの形を変更できます。

.deco-check { font-size: 18px; display: block;}
.deco-check:hover { cursor: pointer; }
.deco-check input { display: none; }
.deco-check .dummy {
  width: 14px;
  height: 14px;
  border: 2px solid #f50057;
  border-radius: 15%;
  display: inline-flex;
  vertical-align: text-top;
}
.deco-check input:checked+.dummy:after {
  content: '';
  width: 80%;
  height: 40%;
  border-left: 2px solid #f50057;
  border-bottom: 2px solid #f50057;
  transform: rotate(-45deg);
}

デモ

動きを確認できるデモを用意しました。
ぜひ、チェックしてみてください。

サンプルチェック1 サンプルチェック2 サンプルチェック3

以上、CSSでチェックボックスを装飾する方法でした。

ラジオボタンの装飾方法はこちらが参考になるかと思います。
【CSS】ラジオボタンを装飾する

ソースコード全文

最後にソースコードを全文載せてきます。

<style>
  .deco-check { font-size: 18px; display: block;}
  .deco-check:hover { cursor: pointer; }
  .deco-check input { display: none; }
  .deco-check .dummy {
    width: 14px;
    height: 14px;
    border: 2px solid #f50057;
    border-radius: 15%;
    display: inline-flex;
    vertical-align: text-top;
  }
  .deco-check input:checked+.dummy:after {
    content: '';
    width: 80%;
    height: 40%;
    border-left: 2px solid #f50057;
    border-bottom: 2px solid #f50057;
    transform: rotate(-45deg);
  }
</style>

<label class="deco-check">
    <input type="checkbox" name="sample_check">
    <span class="dummy"></span>
    サンプルチェック
</label>