CSSデモ1件

:open

dialog、details、select、ピッカー付きのinputが開いている間にマッチするCSS疑似クラスです。要素別の属性セレクタを横断して一本化できます。

details・dialog・select・カラーピッカーを開くと枠線が付きます。ピッカー系は:has(:open)で親の背景色も変わります。

対象要素には共通のスタイルだけ当てています。開いている要素にだけ:openが当たって枠線が出ます。selectやinputはピッカーが要素を覆ってしまうので、親セクションに:has(:open)で背景色も付けて開いている状態が見えるようにしています。

クリックして開く

開いている間、details:openが当たります。

開いている間、dialog:openが当たります

ピッカーを開いている間だけselect:openが当たります。

カラーピッカーを開いている間だけinput[type="color"]:openが当たります。