What is Customizable Select Generator?
The customizable select element is a new CSS feature that lets you style native HTML select elements without replacing them with JavaScript-powered div structures. Using appearance: base-select, you can style the picker icon, option checkmarks, and the dropdown popover while keeping all the built-in accessibility and form behavior of a real select element. No JavaScript dropdown library needed.
quickAnswer
Style native select elements with appearance: base-select (Chrome 135+). Use ::picker-icon for dropdown arrows, option::checkmark for selection indicators, and ::picker(select) for popover styling. Native form semantics and keyboard accessibility are preserved. Fallback is a standard readable select.
limitations
- Customizable select is a very new feature (Chrome 135+) and not yet in CSS Baseline. Firefox and Safari do not yet support it. Always test with @supports and provide a readable native fallback.
- Not all aspects of the select are customizable. The option list layout, scroll behavior, and mobile picker UI are still controlled by the browser. This is by design — it keeps the select usable on all devices.
- The ::picker-icon and option::checkmark pseudo-elements are part of the customizable select model and cannot be used on other elements. They only work inside a select with appearance: base-select.
How to use this tool
- Enter the select options as value|label pairs, one per line.
- Choose picker icon style (chevron, custom SVG, or none) and checkmark style (check, dot, or none).
- Optionally include closed-state styling and browser fallback notes.
- Copy the generated HTML and CSS. The select works as a native form element in all browsers.
What you can use it for
- Style a country selector dropdown to match a brand design system without a custom select library.
- Create a styled language switcher that keeps native form semantics and keyboard accessibility.
- Build a theme selector with custom checkmark icons that works in forms and screen readers.