:open

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The :open CSS pseudo-class represents an element that has open and closed states, only when it is currently in the open state.

Syntax

css
:open {
  /* ... */
}

Description

The :open pseudo-class selects any element currently in the open state, which includes the following elements:

  • <details> and <dialog> elements that are in an open state, that is, they have the open attribute set.
  • <input> elements that display a picker interface for the user to choose a value from (for example <input type="color">), when the picker is displayed.
  • <select> elements that display a drop-down box for the user to choose a value from, when the drop-down is displayed.

Note that the open and closed states are semantic states, and don't necessary correlate with the visibility of the element in question. For example, a <details> element that is expanded to show its content is open, and will be selected by the details:open selector, even if it is hidden with a visibility value of hidden.

Popover elements (that is, elements with the popover attribute set on them) have distinct semantic states representing popovers that are showing or hidden, which can coexist alongside open and closed states. To target a popover element in an showing state, use the :popover-open pseudo-class instead.

Examples

Basic :open usage

This example demonstrates some of the HTML elements that have an open state.

CSS

css
details:open > summary {
  background-color: pink;
}

:is(select, input):open {
  background-color: pink;
}

HTML

html
<details>
  <summary>Details</summary>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pulvinar dapibus
  lacus, sit amet finibus lectus mollis eu. Nullam quis orci dictum, porta lacus
  et, cursus nunc. Aenean pulvinar imperdiet neque fermentum facilisis. Nulla
  facilisi. Curabitur vitae sapien ut nunc pulvinar semper vitae vitae nisi.
</details>
<hr />

<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>
<hr />

<label for="start">Start date:</label>
<input type="date" id="start" />

Result

Custom <select> styling with :open

In this example, we give a basic <select> element some custom styling. The :open pseudo-class is used to apply a styling enhancement to its open state — when the dropdown menu is displayed.

HTML

There is nothing special about our fruit selector.

html
<label>
  Choose your favorite fruit:
  <select name="fruit">
    <option>apple</option>
    <option>banana</option>
    <option>boysenberry</option>
    <option>cranberry</option>
    <option>fig</option>
    <option>grapefruit</option>
    <option>lemon</option>
    <option>orange</option>
    <option>papaya</option>
    <option>pomegranate</option>
    <option>tomato</option>
  </select>
</label>

Note: We are not using a multi-line <select> (that is, one with the multiple attribute set) — those tend to render as a scrolling list box rather than a drop down menu, so don't have an open state.

CSS

In the CSS, we set an appearance value of none on our <select> element to remove the default OS styling from the select box, and provide some basic styles of or own. Most notably, we set an SVG background image of a down arrow on the right-hand side — users tend to recognize <select> elements by the down arrow, so it is a good idea to include it.

We then set some padding on the surrounding <label> element, and a transparent border to keep the layout consistent when we later add a colored border to it.

css
select {
  appearance: none;
  width: 100%;
  display: block;
  font-family: inherit;
  font-size: 100%;
  padding: 5px;
  border: 1px solid black;
  background-color: white;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewbox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,5 15,5 10,15'/%3E%3C/svg%3E")
    no-repeat right 3px center / 1em 1em;
}

label {
  font-family: sans-serif;
  max-width: 20em;
  display: block;
  padding: 20px;
  border: 2px solid transparent;
}

When the <select> is opened, we use the :open pseudo-class to set a different background color and change the background image to an up arrow. We also set a different background color and border on the enclosing <label> element using a combination of the :open and :has() pseudo-classes to create a parent selector. We are literally saying "select the <label>, but only when its descendant <select> is open."

css
select:open {
  background-color: #f8f2dc;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewbox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,15 10,5 15,15'/%3E%3C/svg%3E");
}

label:has(select:open) {
  background-color: #81adc8;
  border-color: #cd4631;
}

Result

The result is as follows. Try opening the <select> dropdown to see the effect on the styling:

Specifications

Specification
HTML
# selector-open
Selectors Level 4
# selectordef-open

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:open

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Has more compatibility info.

See also