https://developer.chrome.com/blog/a-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 Chrome and Google. * All documentation * Baseline * web.dev * PageSpeed Insights audit * The Privacy Sandbox 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 * The Privacy Sandbox * Chrome for Developers * Blog The element on the web. This has been many years in the making, many hours of engineering and collaborative specification work, and the result is an incredibly rich and powerful component that won't break in older browsers. Here's a video of customized selects using these new features: Featuring demos by Una, Brecht, and Adam. If you've been following along closely, you'll notice a few spec names and features have changed since Una's request for community feedback. Luckily, if you worked from that post and are interested in what's changed, Una's also got you covered. There's also shiny new documentation on MDN for customizable select, packed with details. Meet appearance: base-select A new CSS property appearance: base-select that puts the . * Changes the rendered internals of the . * A new minimal look, optimized for customization. * Shown options are in the top-layer, like a popover. * Shown options positioned with anchor(). Using base-select loses a number of features and behaviors: * The stops taking the width of the longest Here's (from left to right) Chrome, Safari, and Firefox rendering the preceding HTML. If the browser supports appearance: base-select then the SVG will appear in the option, otherwise it won't. Chrome, Safari and Firefox shown rendering a select with SVG inside. Chrome shows the images, Safari and Firefox render as if there were no images. Try it in this Codepen. There's risk in breaking existing websites with customizable select, due to the parser changes. Chrome has the features behind a Finch experiment in case there is an emergency need to turn it off. If things go well, the experiment will end and the code will be shipped permanently into the source. Completely customizable Every part of a base-select can be swapped out, customized and animated. Here's a demo that uses every new feature to create recognizable and meaningful select experiences. Four different presenations of a select element are shown. The first has a status indicator dot in it that's green, with a label of on. The next shows avatars next to the options. The third is a color space picker with a custom label built into the select. The last allows choosing draft or published states. Try it in this Codepen. Find many more examples in the resources section at the end of this post. Unchanged JavaScript interfaces There's no risks to your existing JavaScript interactions with a + Una explaining parts and pieces + Una Codepen collection * Community + Brecht De Ruyte Codepen Collection + CSS Tricks on native versus custom selects + Open Props UI-