The selectmenu HTML Tag

Introducing selectmenu: A Revolutionary Form Control

This article dives into the experimental selectmenu form control, highlighting its superior styling capabilities compared to traditional <select></select> elements. We'll explore the reasons behind its development and its potential to revolutionize web form design.

Web developers frequently cite the limitations of styling form controls as a major platform deficiency. The 2020 State of CSS Survey ranked form styling among the top ten most-needed improvements, with <select></select> specifically identified as the most problematic element to style effectively. While the button portion of a <select></select> is relatively easy to style, customizing the options within the dropdown remains incredibly challenging.

Consequently, many design systems and component libraries create custom select elements from scratch, using HTML, CSS, and JavaScript. However, achieving proper accessibility, keyboard navigation, and accurate popup positioning is complex and time-consuming, often resulting in inaccessible select menus.

The selectmenu control aims to solve this persistent problem by providing a built-in, highly stylable alternative.

The Open UI Initiative

The Open UI initiative, a collaborative effort involving developers, designers, and browser implementers, is driving the development of selectmenu. Its goal is to enable developers to fully style and extend built-in UI controls, including selectmenu, dropdowns, checkboxes, and radio buttons. This involves creating specifications for implementation and addressing accessibility requirements.

While still in its early stages, the project is progressing rapidly, and the results are promising. You can participate in the Open UI community and contribute to its development.

The selectmenu Control

Implemented in Chromium (primarily by the Microsoft Edge team, in collaboration with Google Chrome), selectmenu is a new built-in control offering a familiar option selection experience. It features a button displaying the selected value, a popup triggered by clicking the button, and a list of options within the popup.

Why a New Name?

The name "selectmenu" is a placeholder, primarily because significantly altering the existing <select></select> element would cause widespread compatibility issues. Therefore, selectmenu is designed as an independent control.

Getting Started

While not yet production-ready, you can experiment with selectmenu as follows:

1. Use a Canary version of a Chromium-based browser (Chrome or Edge).
2. Enable the "Experimental Web Platform features" flag in about:flags and restart.
3. Replace <select></select> elements in your webpage with selectmenu.

While basic functionality is provided by default, the true power of selectmenu lies in its styling and extensibility options.

Feedback Encouraged!

The Open UI team welcomes feedback. Early testing helps improve the control. Report bugs or limitations via the Open UI GitHub repository.

Understanding selectmenu Anatomy

Styling selectmenu requires understanding its internal structure:

• <selectmenu></selectmenu>: The root element containing the button and listbox.
• <button></button>: Triggers listbox visibility.
• <label></label>: (Optional) Displays the selected value. Not necessarily within the <button></button>.
• <listbox></listbox>: Wraps <option></option> and <optgroup></optgroup> elements.
• <optgroup></optgroup>: Groups <option></option> elements with an optional label.
• <option></option>: Represents selectable values.

Default Behavior

selectmenu mimics the behavior of <select></select>. Minimal markup suffices:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

Default <button></button>, <label></label>, and <listbox></listbox> elements are automatically generated.

Styling with ::part()

The ::part() pseudo-element allows styling individual components:

.my-select-menu::part(button) {
  color: white;
  background-color: #f00;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

This styles the button and listbox. ::part() works with <button></button>, <label></label>, and <listbox></listbox>.

Custom Markup

For greater control, replace default markup using named slots:

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">Open</button>
    <span class="label">Choose an option</span>
  </div>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

The slot="button" attribute replaces the default button. behavior="button" assigns button behavior and accessibility. Similar techniques apply to the <listbox></listbox>.

Extending Markup

Add new elements to extend functionality:

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3 id="Flowers">Flowers</h3>
      <option>Rose</option>
      <h3 id="Trees">Trees</h3>
      <option>Willow</option>
    </div>
  </div>
</selectmenu>

This adds custom grouping and styling.

Replacing Shadow DOM (Advanced)

For complete control, replace the shadow DOM using attachShadow(). This provides maximum customization but requires more advanced techniques.

Conclusion

selectmenu offers significant improvements in styling and extending traditional <select></select> elements. Its built-in browser implementation ensures accessibility and proper positioning. While still experimental, selectmenu holds immense potential for enhancing web form design. Participate in the Open UI initiative to help shape its future.

The above is the detailed content of The selectmenu HTML Tag. For more information, please follow other related articles on the PHP Chinese website!