The selectedcontent and Customizable Select Element

Technical Deep Dive & Specifications

The Anatomy of the Customizable Select

A customizable <select> decomposes the monolithic native control into modular, stylable DOM primitives:

  <select style="appearance: base-select">
    │
    ├── <button type="popover">  ────────> The custom button trigger that opens the menu
    │     └── <selectedcontent>  ────────> Mirrors the rich inner HTML of the active <option>
    │
    └── <div popover> (or ::picker) ─────> The Top Layer dropdown popover containing options
          ├── <option value="us"> ───────> Rich Option 1 (Contains <img>, <span>, etc.)
          ├── <option value="eu"> ───────> Rich Option 2
          └── <option value="jp"> ───────> Rich Option 3

How <selectedcontent> Operates

The <selectedcontent> element is a specialized projection container:

1. When a user selects an <option>, the browser automatically clones the child DOM nodes of that <option> into the <selectedcontent> element.
2. If an <option> contains an <img>, a <strong> title, and a <small> subtitle, all three elements are mirrored inside the button trigger.
3. If an <option> contains elements with the attribute data-selected-label, only the designated summary content is mirrored, allowing you to display a condensed summary in the closed button and full detail in the open menu.

       ACTIVE OPTION IN DROPDOWN                      MIRRORED INSIDE TRIGGER BUTTON
+------------------------------------+          +------------------------------------+
| <option value="btc">               |          | <button>                           |
|   <img src="btc.svg"> Bitcoin      | =======> |   <selectedcontent>                |
|   <span class="price">$65,000</span>|          |     <img src="btc.svg"> Bitcoin    |
| </option>                          |          |   </selectedcontent>               |
+------------------------------------+          +------------------------------------+

The CSS appearance: base-select Property

To opt into the customizable select model, you must explicitly opt out of the operating system's default native rendering engine using CSS:

/* Enables custom styling of the <select> trigger and options */
select {
  appearance: base-select;
}

/* Styles the Top Layer popover picker surface */
select::picker(select) {
  appearance: base-select;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
}

Feature Comparison Matrix

💻 Interactive Code Playground

Starter Code: Production Cryptocurrency Selector

Line-by-Line Code Breakdown

• Lines 31–44 (select.crypto-picker): Applies appearance: base-select, instructing the browser to strip legacy OS widget styling and allow custom layout properties.
• Lines 49–54 (selectedcontent): Uses CSS Flexbox to align the mirrored active option content inside the closed button.
• Lines 56–64 (::picker(select)): Styles the Top Layer popover container generated by the browser when the select expands.
• Lines 98–101 (<button><selectedcontent>...): Declares the trigger button housing the <selectedcontent> projection node and a dropdown arrow.
• Lines 104–126 (<option>): Defines rich option items containing nested <div>, <span>, and badges.
• Lines 134–138: Demonstrates standard FormData extraction. The native name="currency" and value="BTC" are sent directly without hidden inputs.

Expected Browser Render Output

Payment Asset
Select your settlement currency:

+---------------------------------------------+
| [ ₿ ] Bitcoin (BTC)               $64,200 ▼ |
+---------------------------------------------+

[When Clicked / Expanded]:
+---------------------------------------------+
| [ ₿ ] Bitcoin (BTC)                 $64,200 |
| [ Ξ ] Ethereum (ETH)                 $3,450 |
| [ ◎ ] Solana (SOL)                     $145 |
+---------------------------------------------+
(Full keyboard arrow navigation, typeahead filtering, and form submission work natively.)