:open pseudo-class

Baseline 2026 recién disponible (Chrome 133, Firefox 136, Safari 26.5).

Chrome 133Edge 133Safari 26.5Firefox 136

Coincide con `<details>`, `<dialog>`, `<select>` e inputs de fecha y color mientras están abiertos, sustituyendo a los selectores de atributo `[open]` y dando la única forma de estilizar un `<select>` nativo abierto.

Details toggle

Body text.

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; }

HTML

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

Fallback: Usa `details[open]` / `dialog[open]` junto a ella para navegadores antiguos; el estado abierto de `<select>` simplemente no se estiliza.

Fuente: web.dev/blog/baseline-digest-may-2026

Prompt

Estiliza los estados abiertos con la pseudoclase `:open` (funciona en details, dialog, select e inputs con selector) en vez de selectores de atributo `[open]`. Conserva `[open]` como selector duplicado solo si soportas navegadores anteriores a Safari 26.5.