https://developer.chrome.com/blog/rfc-customizable-select

Skip to main content
Chrome for Developers

  * 

Get inspired Blog Docs

  * Build with Chrome
  * Learn how Chrome works, participate in origin trials, and build
    with Chrome everywhere.
  *  
    Web Platform
  *  
    Capabilities
  *  
    ChromeDriver
  *  
    Extensions
  *  
    Chrome Web Store
  *  
    Chromium
  *  
    Aurora
  *  
    Web on Android
  *  
    Origin trials
  *  
    Release notes

  * Productivity
  * Create the best experience for your users with the web's best
    tools.
  *  
    DevTools
  *  
    Lighthouse
  *  
    Chrome UX Report
  *  
    Accessibility

  * Get things done quicker and neater, with our ready-made
    libraries.
  *  
    Workbox
  *  
    Puppeteer

  * Experience
  * Design a beautiful and performant web with Chrome.
  *  
    AI
  *  
    Performance
  *  
    CSS and UI
  *  
    Identity
  *  
    Payments
  *  
    Privacy and security

  * Resources
  * More from the Chrome team.
  *  
    All documentation
  *  
    Baseline
  *  
    web.dev
  *  
    PageSpeed Insights audit

New in Chrome
[                    ]
/
  * English
  * Deutsch
  * Espanol - America Latina
  * Francais
  * Indonesia
  * Italiano
  * Nederlands
  * Polski
  * Portugues - Brasil
  * Tieng Viet
  * Turkce
  * Russkii
  * `bryt
  * l`rbyW@
  * frsy
  * hiNdii
  * baaNlaa
  * phaasaaaithy
  * Zhong Wen  - Jian Ti 
  * Zhong Wen  - Fan Ti 
  * Ri Ben Yu 
  * hangugeo

Sign in

  * Blog

[                    ]
Chrome for Developers

  * 

  * Get inspired
  * Blog
  * Docs
      + More
  * New in Chrome

  * Build with Chrome
  * Web Platform
  * Capabilities
  * ChromeDriver
  * Extensions
  * Chrome Web Store
  * Chromium
  * Aurora
  * Web on Android
  * Origin trials
  * Release notes
  * Productivity
  * DevTools
  * Lighthouse
  * Chrome UX Report
  * Accessibility
  * Workbox
  * Puppeteer
  * Experience
  * AI
  * Performance
  * CSS and UI
  * Identity
  * Payments
  * Privacy and security
  * Resources
  * All documentation
  * Baseline
  * web.dev
  * PageSpeed Insights audit

  * Chrome for Developers
  * 
    Blog

Request for developer feedback: customizable select

Stay organized with collections Save and categorize content based on
your preferences.

Una Kravets
Una Kravets
   

Styling form controls like the <select> element has been reported as
a top developer pain point for years, and we've been working on a
solution. While this work is complex and has taken a long time to get
right, we're getting very close to landing this feature. A
customizable version of the select element is officially in Stage 2
in the WHATWG, with strong cross-browser interest and a prototype for
you to test out from Chrome Canary 130.

Try it out and give us your feedback

Check that your install of Chrome Canary is updated to version 130,
and that you have the experimental web platform features flag on. You
can turn this flag on by going to chrome://flags in your address bar
and turning on #experimental-web-platform-features. Then, you should
be able to see the Codepen demos in this post. Alternatively, you can
check out this Codepen collection to view them all in one place.

Use this form to provide feedback on the feature. It will only take
three minutes to complete!

Note: For this first round of feedback, we understand that the
accessibility implementation is not yet complete in Chrome Canary
(though there is an initial implementation already landed for you to
try out). A team that includes authors, browser implementers and
assistive technology experts is working hard to ensure great
accessibility for valid author patterns. We'd love to hear your
feedback on the initial implementation.

Let's dive into the features of the customizable select API, which
builds on the existing HTML select tag.

Opting-in to the new <select>

To opt-in to the new behavior use the CSS appearance property on both
the in-page select button and also on the select picker. To opt-in,
set appearance: base-select on your <select> element and on the
::picker(select).

::picker(select) is a new user-agent provided pseudo-element that
only applies to <select> elements which have been opted into the new
behavior using appearance: base-select. This picker pseudo-element is
the popover that is triggered by the base select button. You can
opt-in both as shown in the following code:

select,
::picker(select) {
  appearance: base-select;
}

You can choose to only opt-in the in-page button, but you can't
opt-in only the picker popover without opting in the in-page button.
::picker(select) is only created once appearance: base-select is
applied to the <select>.

Now you're ready to customize your select element. The new
customizable select comes with some default styles that look the same
across browsers and operating systems. Here's what the default
customized select looks like against the existing select in Chrome on
macOS:

[select-on] Default user agent style for customizable select on the
right. This is subject to change, and something we'd love your
feedback on. See the Pen Base versus Customizable Select by web.dev (
@web-dot-dev) on CodePen. Demo of a basic select versus customizable
select. Note: The multiple and size attributes on select (<select
multiple> and <select size=n>) are not supported in appearance:
base-select yet.

Breaking down the parts

[select-par] Diagram showing parts of a select.

Once you're in the new customizable select mode, the new elements you
now have access to include: - selectedoption: reflects the inner HTML
of the option which is currently selected. - option::before: contains
a checkmark to indicate the currently selected option as a default
accessibility affordance (this is subject to change). - ::picker
(select): popover that contains all of the content outside of the
button inside of a customizable select.

You can style any part of the select. For example, you can add
arbitrary non-interactive content within the <option> elements, style
the in-page button which opens the select drop-down, and style the
drop-down list of options (the ::picker(select)).

You can also style the button, bring-your-own arrow indicator, and
add arbitrary content within and surrounding any of the elements. In
addition to adding content, you can hide any of these new elements
and default styles. For example, if you don't want an indicator
checkmark in the ::before pseudo element of the option, use the
following CSS.

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

Note: We'd love to hear your feedback on how you might want to access
and style the checkmark part of the select.

While there can be an unlimited number of elements inside of your
select, the browser will bucket anything outside of a <button>
element into the ::picker(select) pseudo-element, which behaves as a
popover anchored to the button. This <button> toggles the ::picker
(select). Options and other elements directly inside of the select
will be hoisted into the ::picker(select), or you can bring your own
wrapper for styling purposes. This wrapper, too, will be placed
inside of the ::picker(select) pseudo-element.

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

The new customizable <select> uses functionality from popover and
anchor positioning. It's built with these two underlying
technologies. This means that the drop-down option list within a
select acts as a popover which is anchored to the trigger button that
opens the select.

You can use anchor positioning to style this ::picker(select) popover
(including making it anchored to other elements). This content model
also means that top layer animation styles work with the option list
to animate entry and exit effects.

Enhance the existing <select> element

Previously, the Chrome team was working on the idea of a <selectlist>
element. What's described in this post is that feature redesigned to
reuse the existing <select> element instead.

One of the key benefits of reusing the existing <select> element is
the ability to progressively enhance the basic HTML element. In
comparison to a brand new element, reusing <select> will still render
meaningful content on your page. The following example shows the
customized select versus what a user in a non-supported browser would
see:

[select-fal] All of the text content within the option is rendered in
the fallback version of the select element.

Basic styling

Changes may be as simple as visual styling of the select element. For
example, to update the button styles, hover and focus styles, or the
background of the select options. After opting-in with appearance:
base-select, apply any CSS you want to the parts of your select.

[select-bas] Changing the styles of various parts of the select, with
the default button. See the Pen Styled select (Basic Styles) by
web.dev (@web-dot-dev) on CodePen.

To customize the arrow indicator, add your own button and arrow
inside of the select.

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

Then, style the arrow:

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

See the Pen Styled select with arrow by web.dev (@web-dot-dev) on
CodePen.

Complex content within options

Take things further with the ability to add and style content beyond
strings within the <option> elements inside <select>. A basic example
is adding flag images next to country names in a drop-down menu. To
achieve this, add an image element next to the option text.

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

[select-cou] Country picker with flags. See the Pen Country select
with flags by web.dev (@web-dot-dev) on CodePen.

A more complex example could include profile photos, names, and
alternative information to help you make decisions about which item
to select in the drop-down.

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">EUR</div>
</option>

[select-cur] Screenshot of currency picker. See the Pen Currency
picker by web.dev (@web-dot-dev) on CodePen.

Style the selected option

You might want the selected option to be displayed differently in the
selected state than it is in the drop-down. An example of this is the
gmail UI, where, to save space, the label is removed once the option
is selected. Do this by hooking into the <selectedoption> element for
styling. The <option> contains all of the following markup:

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

Now apply display: none on .text inside <selectedoption>' to hide the
text content and only show the icon:

selectedoption .text {
  display: none;
}

[select-gma] Gmail-style select with an icon representing the
selected option. See the Pen Gmail select by web.dev (@web-dot-dev)
on CodePen.

Interactive options

With full control over the styling of the ::picker(select), build on
the previous demo to make it interactive on hover and focus. In this
demo, the new calc-size() function is used to animate the picker's
width from showing the icons to showing the full width of the options
on hover or if the select has an option with focus-visible.

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

Interactive Gmail-style select with progressively shown content on
hover or focus. See the Pen Gmail select with hover/focus effect by
web.dev (@web-dot-dev) on CodePen.

Limitations and accessibility notes

With great power comes great responsibility. To keep things
accessible there are some limitations to the feature.

  * Other than <option> elements, no interactive (focusable) elements
    are yet allowed inside of the <select>, such as buttons or other
    elements. For now, the proposed content model only allows for
    <div>, <span>, <option>, <optgroup>, <img>, <svg>, and <hr>
    elements.
  * Split buttons are currently in the experimentation phase as we
    work out an accessible solution.

In the future, the content model is expected to expand to be more
flexible, as the accessibility story for these experiences is fleshed
out.

Conclusion

We're excited to see this feature progress through working groups and
standards bodies, and share our progress as we actively build the
prototype and evaluate the shape of this feature. If you encounter
something that doesn't work as you expect, let us know!

And while this feature is still in development, we'd love to hear
your feedback through this short feedback form.

Thank you for being a part of making sure we get this right and make
it easier to build accessible, customizable form controls on the web!

Except as otherwise noted, the content of this page is licensed under
the Creative Commons Attribution 4.0 License, and code samples are
licensed under the Apache 2.0 License. For details, see the Google
Developers Site Policies. Java is a registered trademark of Oracle
and/or its affiliates.

Last updated 2024-09-12 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my
problem","solvedMyProblem","thumb-up"],
["Other","otherUp","thumb-up"]],[["Missing the information I
need","missingTheInformationINeed","thumb-down"],["Too complicated /
too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of
date","outOfDate","thumb-down"],["Samples / code
issue","samplesCodeIssue","thumb-down"],
["Other","otherDown","thumb-down"]],["Last updated 2024-09-12 UTC."],
[],[]]

  * Contribute

      + File a bug
      + See open issues
  * Related content

      + Chromium updates
      + Case studies
      + Archive
      + Podcasts & shows
  * Follow

      + @ChromiumDev on X
      + YouTube
      + Chrome for Developers on LinkedIn
      + RSS

  * Terms
  * Privacy
  * Manage cookies

  * English
  * Deutsch
  * Espanol - America Latina
  * Francais
  * Indonesia
  * Italiano
  * Nederlands
  * Polski
  * Portugues - Brasil
  * Tieng Viet
  * Turkce
  * Russkii
  * `bryt
  * l`rbyW@
  * frsy
  * hiNdii
  * baaNlaa
  * phaasaaaithy
  * Zhong Wen  - Jian Ti 
  * Zhong Wen  - Fan Ti 
  * Ri Ben Yu 
  * hangugeo