CSS :open playground

Explore :open with details, dialog, select, and picker inputs. Change the background color and switch whether the style only applies when the element is open.

Open details

This block has the open attribute.

Closed details

Opening it also puts it in the :open state.

SelectInput dateInput 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>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="grid gap-4 max-inline-[42rem] [&_:where(details,dialog,select,input[type=color],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week])]:py-3 [&_:where(details,dialog,select,input[type=color],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week])]:px-3.5 [&_:where(details,dialog,select,input[type=color],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week])]:border [&_:where(details,dialog,select,input[type=color],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week])]:border-solid [&_:where(details,dialog,select,input[type=color],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week])]:border-[color-mix(in_srgb,_currentColor_24%,_transparent)] [&_:where(details,dialog,select,input[type=color],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week])]:rounded-xl [&_:where(details,dialog,select,input[type=color],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week])]:[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:bg-[#2f8f6b]">
  <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;
  }
}