複数選択チェックボックス（チップ式）

解説

クリックで ON/OFF を切り替えられるチップ型の複数選択 UI です。本物のチェックボックスを display:none で隠し、label の見た目だけを表示。選択状態は :has(input:checked) という新しい CSS セレクタで検知し、チェックが入った label だけ背景を濃紺に反転させます。JavaScript なしで複数選択を実現している点が特徴で、フォーム送信時には通常どおりチェック値が送られます。

使われる場面

• 検索結果の絞り込み（タグやカテゴリの複数選択）
• アンケートの「当てはまるものすべて」設問
• スキルや興味の選択など、丸ボタン的なタグ入力

選択肢を増やすには label をコピーして文言を変えるだけです。選択時の色は :has ルールの背景色を差し替えれば変えられます。注意点として、:has はやや新しめの機能なので非常に古いブラウザでは反転が効きません。その場合でもチェック自体は機能するので致命的ではありませんが、心配なら少量の JavaScript で同じクラス付けを補うと確実です。隠した入力はキーボード操作に配慮し、フォーカス時の見た目も用意すると親切です。

使用例・適したシーン

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