: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
: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 theopen
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
details:open > summary {
background-color: pink;
}
:is(select, input):open {
background-color: pink;
}
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.
<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.
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."
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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
- {htmlelement("details")}},
<dialog>
,<select>
, and<input>
elements :popover-open
pseudo-class:modal