WWDC 2026: Rediscover the HTML select element (Session 315)

Use Customizable Select in Safari 27 to style native HTML select controls with CSS, rich option content, and accessible progressive enhancement.

Watch on Apple Developer

TL;DR

Customizable Select lets developers restyle native HTML select controls with CSS while retaining semantic HTML, keyboard behavior, screen reader support, and native fallback.
Opt in with appearance: base-select, then style the button, open state, picker icon, drop-down picker, selected option, and option checkmark using new selectors and pseudo-elements.
Options can contain rich content such as SVGs, images, spans, emojis, or video, and the picker can use layouts such as CSS Grid instead of a vertical text-only list.
A custom first-child button plus the new selectedcontent element lets the select button mirror the rich content of the currently selected option; unsupported browsers fall back to the native popup.

Why Customizable Select matters

Historically, styling a drop-down beyond the platform-native select often pushed web developers toward JavaScript widgets or div-based replacements, which can make keyboard interaction, screen reader behavior, and form semantics harder to preserve. Customizable Select keeps the existing HTML select element and exposes new CSS hooks for styling it.

The feature is presented as available in Safari 27 and Chrome 135. Because the markup remains semantic, browsers that do not support the new customization model continue to show a usable native popup.

Use select and option instead of replacing the control with custom non-semantic markup.
Keep built-in keyboard navigation and screen reader integration from the native element.
Treat the feature as progressive enhancement: enhanced styling where supported, native control where not supported.

Basic semantic select markup

Start from ordinary labeled select markup so the control remains accessible and has a native fallback.

<label for="sort-select">Sort by</label>
<select id="sort-select">
  <option>Newest</option>
  <option>Oldest</option>
</select>

Style the select button

The new styling model starts by applying appearance: base-select to the select. This opts out of the fully native look while retaining a base control that can inherit page fonts and accept familiar CSS such as background, border, and padding.

The select button can also react to the open state. Use :open to change button styles while the menu is displayed, and use ::picker-icon to customize the drop-down arrow glyph.

Apply appearance: base-select to the select to begin customization.
Style the button with normal CSS properties such as background-color, border, and padding.
Use select:open for the expanded state.
Use select::picker-icon or select:open::picker-icon to replace or restyle the arrow.

Opt in and style the button

appearance: base-select enables the customizable select styling model and allows page typography and button styles to apply.

body {
  font-family: Gill Sans, sans-serif;
}

select {
  appearance: base-select;
  background-color: var(--green-10);
  border: none;
  padding: 0.6em 1em;
}

Style the open state and picker icon

The :open pseudo-class and ::picker-icon pseudo-element customize the button while the picker is visible.

select:open {
  background-color: var(--green-100);
  color: white;
}

select:open::picker-icon {
  content: url(icons/arrow-white.svg);
}

Customize the drop-down picker and options

The drop-down menu itself is exposed through ::picker(select). As with the button, the picker is first opted into the base styling model with appearance: base-select, then styled with spacing, borders, radius, and shadows.

Options can be styled with existing state selectors such as :checked, and the default checkmark can be replaced through option::checkmark.

Use ::picker(select) to target the menu surface.
Set appearance: base-select on ::picker(select) before styling the picker.
Use option:checked to emphasize the selected option.
Use option:not(:checked) for non-selected options.
Use option::checkmark to replace or hide the selection indicator.

Style the picker surface

The picker can be styled like other UI surfaces once it opts into base-select.

::picker(select) {
  appearance: base-select;
  padding: 4px;
  margin-top: 0.5em;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 9px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

Style selected and unselected options

Use option states and ::checkmark to customize how the active option is communicated visually.

option:checked {
  font-weight: 600;
}

option:not(:checked) {
  color: #777;
}

option::checkmark {
  content: url(checkmark.svg);
  width: 0.65em;
}

Use rich option content and custom layouts

Customizable Select allows option contents to go beyond plain text. The session demonstrates SVG icons and labels inside option elements for a category picker. Empty alt text is used on decorative images so screen readers do not announce both the image and the adjacent label.

The picker is not limited to a vertical list. Because the picker is styleable, it can use CSS layout features such as Grid to arrange visual options in rows and columns.

Place content such as images, SVGs, spans, emojis, or video inside option elements.
Use decorative image alt="" when the visible text label already names the option.
If the default checkmark is removed, provide another clear selected state such as color or background.
Use CSS Grid on ::picker(select) when a visual menu would be too tall as a single column.

Option with image and label

Rich option markup can include an icon and text while avoiding duplicate screen reader announcements for decorative images.

<option value="flower">
  <img src="flowers.svg" alt="">
  <span class="text">Flowers</span>
</option>

Grid layout for the picker

The picker can use CSS Grid to present options in a compact visual layout.

::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr;
  gap: 1rem;
}

Show rich selected content in the button

By default, the select button displays text. To show the rich content from the selected option-such as the selected SVG icon plus label-Customizable Select allows a button element as the first child of the select. Inside that button, the new selectedcontent element mirrors the rich content of the currently selected option.

This enables the closed select button to visually match the selected option without duplicating option-specific UI manually.

Place a button as the first child of the select to replace the built-in select button.
Put selectedcontent inside that button to display the selected option's rich content.
Keep the actual choices in option elements so form semantics and fallback remain intact.

Custom select button with selectedcontent

The custom button displays the rich content of the currently selected option through selectedcontent.

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="anywhere">
    <img src="icons/all.svg" alt="">
    <span class="text">Everything</span>
  </option>
  <option value="buildings">
    <img src="icons/buildings.svg" alt="">
    <span class="text">Buildings</span>
  </option>
  <option value="flowers">
    <img src="icons/flower.svg" alt="">
    <span class="text">Flowers</span>
  </option>
</select>

Fallback, testing, and next steps

Unsupported browsers fall back to the native popup because the implementation still uses the standard select element. The recommended workflow is to test both enhanced and non-enhanced experiences, and to validate behavior with assistive tools.

To try the feature before broad Safari 27 availability, use Safari Technology Preview or Safari Beta. The session points to the WebKit customizable select demo and recommends the related Grid Lanes session for the photo layout shown around the select examples.

Test in browsers that support Customizable Select and browsers that do not.
Test with assistive technologies, especially when using rich option content and custom selected states.
Use the WebKit demo as a reference implementation.
Consult "Learn CSS Grid Lanes" for the layout method used elsewhere in the demo site.

Rediscover the HTML select element