How to Use the selectedcontent Element

The HTML selectedcontent element lets a selection menu show the contents of its chosen item inside the menu button. For example, if each choice has a name and a short note, the closed menu can show both for the chosen item.

The answer first

A small example

<label for="plan">Plan</label>
<select id="plan" name="plan" class="plan-select">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <div>
    <option value="basic">
      <span>Basic</span>
    </option>
    <option value="pro" selected>
      <span>Pro</span>
      <small>Recommended</small>
    </option>
  </div>
</select>

When the page opens, the selected item shows “Pro” and “Recommended”. You do not need to write a second copy of that text for the button.

It copies the chosen item's contents

The browser copies the child elements of the selected option into selectedcontent. The original option stays in the list. The copied content is not the option's value.

If an option has a label attribute, that attribute's text is not copied into selectedcontent. Put display content inside the option, and put the form value in value, to keep those jobs clear.

Change the appearance

selectedcontent lets you style the text and decoration from the selected item inside the button. Browser support differs, so check display and interaction in the browsers you plan to support.

@supports (appearance: base-select) {
  .plan-select,
  .plan-select::picker(select) {
    appearance: base-select;
  }
}

This CSS is an entry point for styling the selection menu in browsers that support it. The select keeps its selection and form-submission roles whether or not you add this CSS.

Common mistakes

• Writing the display text inside selectedcontent. The browser copies it from the chosen option.
• Expecting selectedcontent to submit the form value. The selected option's value provides that value.
• Using this feature with a multiple select. It does not display a list of multiple choices.
• Publishing without checking support. Test selection, display, and keyboard use in your target browsers.

Related elements

selectedcontent does not create a selection menu on its own. The select element provides the control, and option elements provide its choices. For detailed conditions and browser evidence, see Yugien Atlas on selectedcontent.