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

チェックマークを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>