HTML Tags
HTML <selectedcontent> Tag
Learn how the experimental HTML <selectedcontent> tag displays the selected option inside a customizable select button.
The
<selectedcontent>tag displays a clone of the currently selected<option>inside the button of a customizable<select>.
This is a newer, experimental element with limited and evolving browser support. Use it as progressive enhancement and verify compatibility before relying on it in production.
Syntax
html
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>Attributes
| Attribute | Description |
|---|---|
| class | Specifies one or more class names for CSS styling. |
| id | Defines a unique identifier for the element. |
| style | Adds inline CSS styles. |
| title | Provides additional information as a tooltip when hovered. |
Example
Compatibility notice: This example uses customizable-select features that may not work in every browser. In unsupported browsers, keep the underlying <select> usable as a standard form control.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectedcontent Tag Example</title>
<style>
select,
::picker(select) {
appearance: base-select;
}
select {
min-width: 260px;
border: 2px solid #29AB87;
border-radius: 8px;
padding: 8px;
font: inherit;
}
select > button,
selectedcontent,
option {
display: flex;
align-items: center;
gap: 10px;
}
option {
padding: 10px;
}
option::checkmark {
display: none;
}
.badge {
display: inline-grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 6px;
background-color: #e7f8f3;
color: #007a96;
font-weight: bold;
}
selectedcontent .description {
display: none;
}
</style>
</head>
<body>
<h1>Choose a Tutorial</h1>
<label for="tutorial">Tutorial:</label>
<select id="tutorial" name="tutorial">
<button>
<selectedcontent></selectedcontent>
</button>
<option value="html" selected>
<span class="badge">H</span>
<span>HTML</span>
<small class="description">Structure webpages</small>
</option>
<option value="css">
<span class="badge">C</span>
<span>CSS</span>
<small class="description">Style webpages</small>
</option>
<option value="javascript">
<span class="badge">JS</span>
<span>JavaScript</span>
<small class="description">Add interactivity</small>
</option>
</select>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes (135+) | Yes (Chromium) | No | No | Yes (Chromium) | No |
Browser support is still evolving. Current compatibility data reports support in Chrome 135 and later and related Chromium-based browsers, but not in Firefox, Safari, or Internet Explorer. Check current compatibility data before production use.
Notes
- Treat
<selectedcontent>as progressive enhancement because it is experimental and not yet available across all major browser engines. - Place it inside a
<button>that is the first child of the related<select>. - The
<selectedcontent>element should be the button's only child, followed by the select's<option>elements. - When the selection changes, the browser replaces its contents with a clone of the newly selected option's DOM content.
- Content inside the select button is inert, so controls inside the cloned content cannot be focused or activated.
- Changing the selected option's child content dynamically does not necessarily refresh the existing clone until the selection changes; update carefully in JavaScript frameworks.
- Use
appearance: base-selecton the select and its::picker(select)pseudo-element to opt into customizable-select rendering. - Keep a functional native
<select>experience as the fallback for unsupported browsers. - Both the opening and closing tags are required.
Conclusion
The <selectedcontent> tag enables rich, styleable selected-option content in customizable select controls.
Because the element is new and support is still changing, use it with progressive enhancement, a usable fallback, and up-to-date browser testing.