マークがアニメーションするチェックボックス
CSSのみタッチ操作可能
チェック時にマークがアニメーションするチェックボックスです。
実装のポイント
チェックマークのアイコンをSVGにしてそのパスをアニメーションさせています。パスのアニメーションの仕組みについてはテキストのアウトラインが浮かび上がるアニメーションにて解説しています。今回は長さが不変なのでCSSに直接stroke-dasharrayとstroke-dashoffsetの値をコードしています。
:checked擬似クラスを使ってチェック時のスタイルを定義し、stroke-dashoffsetをtransitionプロパティで変化させることでチェックマークのアニメーションを実現しています。
なお、チェックボックスのデザインをカスタマイズするときに既存の<input type="checkbox" />をdisplay: noneなどで消すのはフォーカスができなくなるので避けたほうがよいです。そのほかチェックボックスのカスタマイズ方法は下記記事に詳しく紹介されています。
ICS MEDIAコード例
コード例では1つのチェックボックスのHTMLを掲載しています。
HTML
<label class="checkbox">
<span class="iconWrapper">
<input type="checkbox" class="checkboxInput" />
<span class="checkboxIcon">
<svg
width="14"
height="11"
viewBox="0 0 14 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1.5 4L5 9L13 1" stroke="white" stroke-width="2" />
</svg>
</span>
</span>
<span class="checkboxText">Checkbox</span>
</label>
CSS
.checkbox {
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--checkbox-color: #363636; /* チェックボックスの色 */
--checkbox-color-hover: #dfdfdf; /* チェックボックスのホバー時の色 */
--checkbox-color-focus: #2371e7; /* チェックボックスのフォーカス時の色 */
display: flex;
column-gap: 8px;
align-items: center;
}
.iconWrapper {
position: relative;
top: -1px;
width: 18px;
height: 18px;
}
.checkboxInput {
width: 18px;
height: 18px;
appearance: none;
border: 1px solid var(--checkbox-color);
border-radius: 4px;
transition: 0.3s background-color var(--ease-out-quart);
}
@media (any-hover: hover) {
.checkboxInput:hover {
background-color: var(--checkbox-color-hover);
}
}
.checkboxInput:checked {
background-color: var(--checkbox-color);
}
.checkboxIcon {
position: absolute;
top: 2px;
left: 2px;
display: block;
line-height: 1;
svg {
stroke-dasharray: 17.4167px; /* パスの長さ */
stroke-dashoffset: 17.4167px; /* パスの長さ */
}
}
.checkboxInput:checked + .checkboxIcon {
svg {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.3s 0.05s var(--ease-out-quart);
}
}
.checkboxInput:focus-visible {
outline-color: var(--checkbox-color-focus);
}
