Design / 9:30

Rediscover the HTML select element

DesignSafari & Webiosipadosmacosvisionoswatchos

Key Points

  • Explains how to unlock full control of styling select menus on the web.
  • The HTML select element is getting a major upgrade with a new CSS appearance value, and new pseudo-elements.
  • Covers how the select options can contain rich content with new possibilities in HTML.
  • Build selects that match the design system, while keeping all the accessibility and robustness of the default element.
  • The session moves through Style the select button, Customize the drop-down, Go beyond text options, The selectedcontent element, Fallback for unsupported browsers.
  • Key concepts include HTML select, HTML, Safari, JavaScript.

Condensed Flow

01

Go beyond text options:

Focuses on JavaScript.

02

The selectedcontent element:

Focuses on JavaScript.

More Detail

Additional details

  • Detailed flow: Style the select button -> Customize the drop-down -> Go beyond text options -> The selectedcontent element -> Fallback for unsupported browsers.
  • APIs and concepts to recognize: HTML select, HTML, Safari, JavaScript.

Resources