# :open pseudo-class

Status: Baseline 2026 neu verfügbar (Chrome 133, Firefox 136, Safari 26.5).  
Quelle: https://web.dev/blog/baseline-digest-may-2026  
Seite: https://designforai.dev/de/css/open-pseudo-class

Matcht `<details>`, `<dialog>`, `<select>` und Datums-/Farb-Inputs, während sie offen sind, ersetzt `[open]`-Attributselektoren und ist die einzige Möglichkeit, ein offenes natives `<select>` zu stylen.

## HTML

```html
<div class="fx-028">
  <details><summary>Details toggle</summary>Body text.</details>
  <select><option>One</option><option>Two</option></select>
</div>
```

## CSS

```css
.fx-028 {
  font-family: system-ui;
  display: grid;
  gap: 12px;
  max-width: 260px
}
.fx-028 details,.fx-028 select {
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 8px
}
.fx-028 :open {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #2563eb33
}
.fx-028 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```

Fallback: Nutze `details[open]` / `dialog[open]` daneben für ältere Browser; der offene `<select>`-Zustand bleibt einfach ungestylt.

## Prompt

Style offene Zustände mit der Pseudoklasse `:open` (funktioniert auf details, dialog, select und Picker-Inputs) statt mit `[open]`-Attributselektoren. Behalte `[open]` nur als doppelten Selektor, wenn du Browser älter als Safari 26.5 unterstützt.