<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 an experimental technology
Check the Browser compatibility table carefully before using this in production.

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The <selectedcontent> HTML element can be used to display the content of the currently selected <option> inside a closed <select> element.

Attributes

The <selectedcontent> element includes the global attributes, but they will essentially be ignored because when used correctly as a child of a select button, the element is rendered inert.

The select button and all its content are inert by default so that if interactive children (for example, links or buttons) are included inside it, it will still be treated like a single button for interaction purposes.

No other attributes are defined on <selectedcontent>.

Description

When creating a Customizable select element, you can include the <selectedcontent> element inside a <button> element, which in turn needs to be the first child of the <select> element:

html

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>

  ...
</select>

<selectedcontent> contains a clone of a <select> element's currently-selected <option> element content, created using cloneNode() under the hood.

Any subsequent <select> content will be included in the drop-down picker.

Whenever the <select> element's selected <option> switches from one option to another, the <selectedcontent> element's content is removed and replaced by a new cloned copy of the DOM structure of the newly selected option, which is created using cloneNode(). Dynamic modifications to the selected <option> element's content made after the <select> element has been created are not automatically cloned to the <selectedcontent> element and must be manually updated by the developer.

Note: The <selectedcontent> element's built-in synchronization features that make it ideal for websites built with minimal or no JavaScript. However, its use is not required when building customizable selects. Developers using JavaScript frameworks may prefer to use the UI synchronization features provided by their framework instead of using <selectedcontent>.

Styling with CSS

It is useful to be able to target the currently-selected <option> element's content as it appears inside the select button with CSS styles, without affecting the styling of the content as it appears inside the picker.

For example, your <option> elements may contain icons, images, or even videos. This content might look nice inside the picker, but could cause the select button to increase in size, look untidy, and affect the surrounding layout.

This could be fixed by hiding the problem content when it is contained inside <selectedcontent>. For example:

css

selectedcontent img {
  display: none;
}

Note: If the <button> and/or <selectedcontent> elements are not included inside the <select> markup, the browser will place the selected option content inside the select button implicitly, but this targeting will not be possible.

Examples

You can see a full example that includes the <selectedcontent> element in our Customizable 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

Not currently part of a specification. See https://github.com/whatwg/html/pull/10633 for the relevant specification PR.