<selectedcontent>: The selected option display element
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
The<selectedcontent>HTML is used inside a<select> element to display the contents of its currently selected<option> within its first child<button>. This enables you to style all parts of a<select> element, referred to as "customizable selects".
Attributes
This element includes theglobal attributes.
Description
You use the<selectedcontent> element as the only child of a<button> element, which must be the first child of the<select> element. Any<option> element, the only other valid child of<select>, must come after the<button> and nested<selectedcontent> pair.
<select> <button> <selectedcontent></selectedcontent> </button> <option></option> ...</select>How<selectedcontent> works behind the scenes
The<selectedcontent> element contains a clone of the content of the currently selected<option>. The browser renders this clone usingcloneNode(). When the selected<option> changes, such as during achange event, the contents of<selectedcontent> are replaced with a clone of the newly selected<option>. Being aware of this behavior is important, especially when working with dynamic content.
Warning:Since the browser updates<selectedcontent> only when the selected<option> changes, any dynamic modifications to the content of the selected<option> after the<select> is rendered won't be cloned to<selectedcontent>. You'll need to update<selectedcontent> manually. Watch out if you're using any of the popular front-end JavaScript frameworks where<option> elements are updated dynamically after the initial render–the result may not match what you expect in<selectedcontent>.
<selectedcontent> inertness
By default, any<button> inside a<select> element isinert. As a result, all content inside that button—including<selectedcontent>—is also inert.This means users can't interact with or focus on content inside<selectedcontent>.
Styling the selected option's content with CSS
You can target the content of the currently selected<option> element and style how it appears inside the select button. Styling the button doesn't affect the styling of the content of the<option> that was cloned. This lets you customize how the selected option appears in the button, separately from how it appears in the drop-down list.
For example, your<option> elements may contain icons, images, or even videos that render nicely inside the drop-down, but could cause the select<button> to increase in size, look untidy, and affect the surrounding layout. By targeting the content inside<selectedcontent>, you can hide elements such as images in the button, without affecting how they appear in the drop-down, as shown in the following snippet:
selectedcontent img { display: none;}Note:If the<button> and/or<selectedcontent> elements are not included inside<select>, the browser creates an implicit<button> to display the contents of the selected<option>. This fallback button cannot be targeted with CSS using thebutton orselectedcontent type selector.
Examples
You can see a full example that includes the<selectedcontent> element in ourCustomizable select elements guide.
Technical summary
| Content categories | None |
|---|---|
| Permitted content | Mirrors content from the selected<option>. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | A<button> element that is the first child of a<select> element. |
| Implicit ARIA role | None |
| Permitted ARIA roles | None |
| DOM interface | HTMLSelectedContentElement |
Specifications
| Specification |
|---|
| HTML # the-selectedcontent-element |
Browser compatibility
See also
- The
<select>element - The
<option>element - The
<optgroup>element - Customizable select elements