: The selected option display element

{{SeeCompatTable}}

The <selectedcontent> HTML is used inside a {{htmlelement("select")}} element to display the contents of its currently selected {{htmlelement("option")}} within its first child {{htmlelement("button")}}. This enables you to style all parts of a <select> element, referred to as "customizable selects".

Attributes

This element includes the global attributes.

Description

You use the <selectedcontent> element as the only child of a {{htmlelement("button")}} element, which must be the first child of the {{htmlelement("select")}} element. Any {{htmlelement("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 {{htmlelement("option")}}. The browser renders this clone using {{domxref("Node.cloneNode", "cloneNode()")}}. When the selected <option> changes, such as during a change 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 is inert. 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 the button or selectedcontent type selector.

Examples

You can see a full example that includes the <selectedcontent> element in our Customizable select elements guide.

Technical summary

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• The {{HTMLElement("select")}} element
• The {{HTMLElement("option")}} element
• The {{HTMLElement("optgroup")}} element
• Customizable select elements