カスタムチェックボックス＆トグルスイッチ

解説

このパーツは、ブラウザ標準の地味なチェックボックスを隠し、自前の四角いボックスとトグルスイッチに置き換えたフォーム部品です。仕組みは CSS だけで完結します。本物の input は display:none で隠し、その隣に置いた span を装飾用の見た目として使います。チェック状態は :checked 疑似クラスと隣接セレクタで検知し、塗りつぶしの背景色や、回転した小さな枠で作るチェックマークを ::after で描いています。トグルスイッチも同じ要領で、丸いつまみを左右に transform で移動させます。

使うとよい場面

• 設定画面のオン・オフ項目（通知やダークモードなど）
• メール購読の同意やオプション選択を分かりやすく見せたいフォーム
• ブランド配色に合わせて入力部品の見た目を統一したいとき

アクティブ色は :checked 時の background を、切り替えの速さは transition の秒数を変えて調整します。標準の input を隠していてもキーボード操作とラベルの紐付けは生きているので機能は損なわれませんが、フォーカス時の見た目を別途付けると操作位置が分かりやすくなります。

使用例・適したシーン

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