selectedcontent

Displays a clone of the currently selected option's content inside a customizable select's button trigger. Used with appearance: base-select to show rich content (icons, images, descriptions) in the closed select state.

When to Use

Inside a customizable select to show a custom trigger with rich content
When options contain images, icons, or descriptions that should be mirrored in the closed state
When you need CSS control over how the selected value displays in the button

Requirements: Only works when the browser supports appearance: base-select (Chrome 135+). In non-supporting browsers, the select falls back to its standard rendering.

How It Works

The browser automatically clones the currently selected <option>'s DOM into the <selectedcontent> element using cloneNode(). It updates every time the selection changes via a change event.

Required Structure

The nesting must follow this exact pattern:

<select> <button>  <selectedcontent></selectedcontent>  </button> <option value="a">Option A</option>  <option value="b">Option B</option> </select>

<button> must be the first child of <select>
<selectedcontent> must be inside that <button>
All <option> elements come after the button
Both opening and closing tags are mandatory

Examples

Basic

A plain select with a custom trigger. The selected option text is cloned into the button automatically.

<select name="status"> <button> <selectedcontent></selectedcontent> </button> <option value="open">Open</option> <option value="closed">Closed</option> <option value="pending">Pending</option> </select>

Rich Content with Flags

Options with emoji flags and descriptions. The .detail text is hidden in the closed trigger via CSS to keep it compact.

<select name="language"> <button> <selectedcontent></selectedcontent> </button> <option value="en"> <span aria-hidden="true">🇺🇸</span> English <span class="detail"> — American English</span> </option> <option value="es"> <span aria-hidden="true">🇪🇸</span> Español <span class="detail"> — Spanish</span> </option> <option value="fr"> <span aria-hidden="true">🇫🇷</span> Français <span class="detail"> — French</span> </option> </select>

Styling

Since <selectedcontent> contains a clone of the selected option's DOM, you can target child elements to control what is visible in the closed state versus the open dropdown.

/* Hide supplementary text in the closed trigger */ selectedcontent .detail { display: none; } /* Hide images in the button, show only in dropdown */ selectedcontent img { display: none; }

VB applies these styles automatically inside @supports (appearance: base-select):

selectedcontent gets display: flex with align-items: center and gap
selectedcontent .detail is hidden by default
The parent button fills the select width as a flex container

Attributes

<selectedcontent> accepts only global HTML attributes (class, id, style, data-*, etc.). There are no element-specific attributes.

Accessibility

Inert by default: The <button> inside <select> is inert, so <selectedcontent> and its children cannot be focused or interacted with independently
Implicit ARIA role: none — screen readers treat it as presentation
Cloned content: Decorative elements (icons, flags) in options should use aria-hidden="true" since they are cloned into the trigger as well
Keyboard navigation: Fully handled by the parent <select> — no additional keyboard handling needed

Caveats

Dynamic content: The browser only updates <selectedcontent> on change events. If you modify the currently selected option's content dynamically (e.g., via a framework), the clone won't refresh automatically
Implicit button: If you omit <button> and <selectedcontent>, the browser creates an implicit button that cannot be targeted with CSS type selectors
Experimental: This element is not yet Baseline — check browser support before relying on it in production

Browser Support

Requires appearance: base-select support (Chrome 135+). VB gates all related styles behind @supports, so non-supporting browsers fall back gracefully to the standard select rendering.

select — Parent element; see the Customizable Select section for the full base-select guide
option — Options whose content gets cloned into selectedcontent
optgroup — Group related options with styled section headers
button — The required parent of selectedcontent inside a customizable select
combo-box — Alternative for filterable dropdowns with full browser support