CSSでチェックマーク・チェックボックスを自作する

忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋

チェックマーク
チェックボックス
1. 文字列と一緒に使う

チェックマーク

チェックマークをCSSで作る時に行うことは以下3点です。

長方形の作成
長方形の左辺と下辺のみ、ボーダーをつける
45度回転させる

HTML

<span class="check" />

CSS

.check {
  display: block;
  width: 12px;
  height: 7px;
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-color: green;
  transform: rotate(-45deg);
}

チェックボックス

チェックボックスは、上記のチェックマークに加えて、以下を満たすよう調整します！

ボックスの追加
チェック状態のみ、チェックマークを表示する

HTML

<label class="checkbox">
  <input type="checkbox" />
  <span />
</label>

CSS

.checkbox {
  cursor: pointer;
}

.checkbox input {
  display: none;
}

/* ボックス */
.checkbox span {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid green;
}

/* チェックマーク */
/* 常にチェックマークを表示したい場合は、「.checkbox span::before」にすればOKです */
.checkbox input:checked + span::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 1px;
  display: block;
  width: 12px;
  height: 7px;
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-color: green;
  transform: rotate(-45deg);
}

ポイントはこちらです👇

inputを用いてチェック状態を管理する。ただし、デフォルトのUIは使用しないので非表示にする。
inputがチェック状態の場合、input隣のspan要素のbefore要素でチェックマークを作る（input:checked + span::before）

文字列と一緒に使う

実際に使うときは以下のような形で、文字列と一緒に使うことが多いかと思います👀

<!-- CSSは「チェックボックス」セクションのCSSと同じです -->
<label class="checkbox">
  <input type="checkbox" />
  <span />
  Check me!
</label>