カスタムチェックボックス（チェック描画アニメ）

解説

カスタムチェックボックスは、クリックするとチェックマークが描かれるように現れる、見た目を作り込んだチェックボックスです。CSS のみで実装し、JavaScript は不要です。本物の input 自体は opacity:0 で見えなくし、隣の span.cb__box を自前の四角い枠として表示します。チェックマークは ::after で L 字の線を作り、input:checked のときに transform:scale() で 0 から 1 へ拡大することで、跳ねるような描画アニメーションを出しています。

こんなフォームに

• 利用規約・プライバシーポリシーへの同意欄
• 登録フォームのオプション選択
• OS 標準より見栄えを良くしたいチェック項目

チェック時の色は input:checked+.cb__box の background と border-color（初期は #667eea）で変えられます。label で全体を包んでいるので、文字をクリックしても切り替わり操作しやすい作りです。アニメの跳ね具合は ::after の cubic-bezier の値で調整できます。本物の input を隠しているだけなので、フォーム送信時の値の扱いは標準のチェックボックスとまったく同じです。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録