Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <selectedcontent> Tag

Written by Published

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

AttributeDescription
classSpecifies one or more class names for CSS styling.
idDefines a unique identifier for the element.
styleAdds inline CSS styles.
titleProvides 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)NoNoYes (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-select on 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.

PreviousHTML <select> TagNextHTML <option> Tag