チェック済みチェックボックスを :has() で親装飾
CSS の :has() 親セレクタを使い、チェックボックスが checked のときに親 label の背景・文字色・打ち消し線を動的変更する実装。JavaScript 不要。Chrome / Safari / Edge 対応。
解説
このサンプルは、チェックボックスが checked 状態になったかどうかを、JavaScript を一切使わず親の label 側で判定して装飾を切り替えるチェックリストです。鍵になるのは CSS の親セレクタ :has() で、.hc:has(input:checked) と書くだけで「中のチェックが入っている label」を狙い撃ちできます。チェックすると背景が淡い黄色に変わり、枠色が濃くなり、文字に取り消し線が引かれて「完了したタスク」が一目で分かります。切り替えは transition で滑らかに行われます。
使いどころは幅広く、朝のルーティンや買い物リストのようなやることリスト、設定画面で有効にした項目だけを強調したいときなどに向きます。サーバー処理や状態管理ライブラリが要らず、静的ページにそのまま置けるのが利点です。
カスタマイズと注意点
- 完了色を変えるなら
:has(input:checked)内のbackgroundとborder-color、チェック自体の色はaccent-colorを編集します。 - 取り消し線が不要なら
text-decoration行を削除すれば、色だけで状態を表せます。 :has()は新しめのブラウザ向けの機能です。未対応環境では装飾が付かないだけで、チェック操作そのものは普通に動くため、安全に段階的採用できます。
よくある質問
チェックしたときの色を変えるにはどこを直しますか？
CSS の .hc:has(input:checked) ブロックにある background と border-color、color を好みの色に変えます。チェックボックスのチェック自体の色は .hc input の accent-color で指定しているので、そこも合わせると統一感が出ます。
JavaScript なしで本当に動きますか？
はい。状態の判定はすべて CSS の :has() セレクタが担当しているため JavaScript は不要です。:has() に未対応の古いブラウザでは装飾だけが付かなくなりますが、チェックの入力操作は問題なく行えます。