Playground de :open en CSS

Explora :open con details, dialog, select e inputs con picker. Cambia el color de fondo y alterna si el estilo se aplica solo cuando el elemento está abierto.

Details abierto

Este bloque tiene el atributo open.

Details cerrado

Al abrirlo también entra en estado :open.

Select Input date Input color

HTML

<div class="open-demo">
  <details open>
    <summary>Open details</summary>
    <p>This block has the open attribute.</p>
  </details>

  <details>
    <summary>Closed details</summary>
    <p>This block only matches :open when it is opened.</p>
  </details>

  <dialog open>
    Open dialog with the open attribute.
  </dialog>

  <label>
    Select
    <select>
      <option>CSS :open</option>
      <option>details</option>
      <option>dialog</option>
    </select>
  </label>

  <label>
    Input date
    <input type="date" />
  </label>

  <label>
    Input color
    <input type="color" value="#2f8f6b" />
  </label>
</div>

CSS

.open-demo {
  display: grid;
  gap: 1rem;
  max-inline-size: 42rem;
}

.open-demo :where(details, dialog, select, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]) {
  padding-block: 0.75rem;
  padding-inline: 0.875rem;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 0.75rem;
  font: inherit;
}

.open-demo :where(details, dialog, select, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]):open {
  background-color: #2f8f6b;
}

.open-demo {
  display: grid;
  gap: 1rem;
  max-inline-size: 42rem;

  :where(details, dialog, select, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]) {
    padding-block: 0.75rem;
    padding-inline: 0.875rem;
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 0.75rem;
    font: inherit;
  }

  :where(details, dialog, select, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]):open {
    background-color: #2f8f6b;
  }
}