The :open pseudo-class can be applied to:

• <dialog>
• <details>
• <select>
• <input type="color">
• <input type="date">
• <input type="week">
• <input type="month">
• <input type="datetime-local">

:open styles an input when its picker is showing.

input:open {
  outline: solid black 1px;
  border-radius: 3px;
}

<dialog> or <details> could already be styled with the [open] attribute selector, which is equivalent to :open, so this pseudo-class doesn’t bring new styling functionality to those elements.

details:open summary {
        background-color: #e1f2ff;
    }

There isn’t a :closed pseudo-class, but :open can be combined with the :not selector.

details:not(:open) {
    /* styles */
}

Popovers have their own seperate :popover-open pseudo-class, for some reason.

Browser support

Supported in Chrome/Edge 133 and Firefox Nightly.

Future

Hopefully we’ll also get the ability to style the button that opened a dialog or popover.