HTML <selectedcontent> Element
The HTML <selectedcontent> element displays a copy of the content from the currently selected <option> inside the button of a customizable <select> control.
Syntax
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>The <selectedcontent> element requires both an opening and closing tag. It is used inside the button associated with a customizable <select> element and does not contain author-supplied content of its own.
Attributes
The <selectedcontent> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses <selectedcontent> to display the contents of the currently selected option within a customizable <select> control.
Usage Notes
The <selectedcontent> element is part of the customizable select feature. It allows the content of the selected <option> to appear inside the first <button> of a <select> element, where that content can be styled separately from the options in the drop-down list.
When the selected option changes, the browser replaces the contents of <selectedcontent> with a copy of the newly selected <option> element's content. This behavior does not require JavaScript. :contentReference[oaicite:0]{index=0}
The <selectedcontent> element itself should be empty in the HTML source because its displayed contents are supplied by the browser from the selected option. :contentReference[oaicite:1]{index=1}
The element is intended for a single-selection customizable select. When the <select> element has the multiple attribute, its <selectedcontent> is not used to reflect a selected option. :contentReference[oaicite:2]{index=2}
Content inside the select's button is inert, so interactive content displayed through <selectedcontent> cannot be independently focused or activated. :contentReference[oaicite:3]{index=3}
Accessibility
The <selectedcontent> element should be used as part of the native customizable <select> structure rather than as a replacement for the select control itself.
Provide the parent <select> element with a clear accessible label, normally by associating it with a visible <label> element. Option content should also remain understandable without depending only on color, images, or other visual styling.
Browser Support
Limited availability: The <selectedcontent> element is a newer HTML feature and is not currently supported by all widely used browsers. Check current browser compatibility before relying on it for production websites, and make sure the underlying select remains usable where customizable select features are unavailable. :contentReference[oaicite:4]{index=4}
For detailed browser compatibility information, see MDN: HTML <selectedcontent> Element Browser Compatibility .
Related Elements
The <selectedcontent> element is closely related to the <select> element that provides the selection control, the <option> element that defines each choice, and the <button> element that contains <selectedcontent> in a customizable select.