チェックボックスを自作する

Web制作

• CSS
• HTML

概要

アイコンフォントを使用せずにチェックボックスを自作する。

基本のコード

HTML

<input id="cb01" type="checkbox">
<label for="cb01">チェックボックス</label>

CSS

.cb{
  display: none;
}
.cb + label{
  height: 1em;
  padding: .3em;
  line-height: 1em;
  font-size: 2rem;
  display: inline-block;
}
.cb + label::before{
  content: "";
  box-sizing: border-box;
  width: .6em;
  height: .6em;
  margin-right: .1em;
  border: 1px solid #222;
  display: inline-block;
  /*ここから高さ合わせ*/
  vertical-align: top;
  position: relative;
  top: .2em; /* (labelの高さ - チェックボックスの高さ)/2 */
}
.cb:checked + label{
  background-color: #ffcdd2;
  border-radius: .3em;
}
/*ここまで共通、以下はパターン別*/
#cb0$:checked + label::before{
  /*チェックマークのデザイン*/
}

パターン1

チェックボックス

#cb01:checked + label::before{
background:
  linear-gradient(60deg, transparent 15%, red 15%, red 25%, transparent 25%),
  linear-gradient(125deg, transparent 55%, red 55%, red 65%, transparent 65%);
background-repeat: no-repeat;
}

パターン2

チェックボックス

#cb02:checked + label::before{
background:
  linear-gradient(130deg, #ffcdd2 30%, transparent 30%, transparent 65%, #ffcdd2 65%),
  linear-gradient(40deg, #ffcdd2 20%, red 20%, red 35%, transparent 35%, transparent 85%, #ffcdd2 85%),
  linear-gradient(130deg, transparent 50%, red 50%, red 65%, transparent 65%);
background-repeat: no-repeat;
}

おまけ

チェックボックス

#cb03 + label::before{
  content: "\2610";
  border: none;
  display: inline;
  position: static;
}
#cb03:checked + label::before{
  content: "\2611";
}

いわゆる機種依存文字の☐と☑をラベルのbeforeに置いたパターン。

utf-8だと機種関係なく表示されるという情報も見つけたが、いかんせん試す環境が無いのでおまけとする。