jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Free Customizable Select Generator

Style native select elements with the new customizable select CSS features. Generate CSS for base-select appearance, ::picker-icon for dropdown arrows, option::checkmark for selection indicators, ::picker(select) for dropdown popover styling, and open/closed state selectors. Progressive enhancement keeps native select semantics.

Loading tool...

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.

Last updated: 2026-05-28

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 閳ユ攰t 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.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Enter the select options as value|label pairs, one per line.
  2. Choose picker icon style (chevron, custom SVG, or none) and checkmark style (check, dot, or none).
  3. Optionally include closed-state styling and browser fallback notes.
  4. 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.

Use cases

Practical examples

example

Branded country selector

A checkout form needs a country dropdown that matches the site's design. Use customizable select with a custom chevron icon, branded colors, and a checkmark for the selected option. The select still works as a native form element.

example

Theme switcher dropdown

A documentation site has a light/dark theme switcher. Style the select with appearance: base-select, a custom SVG sun/moon icon as the picker indicator, and themed background colors for the popover.

Common mistakes

  • Expecting customizable select to work in all browsers 閳ユ攰t requires Chrome 135+ with experimental features. Older browsers show a standard native select.
  • Using appearance: none instead of appearance: base-select 閳ユ敄he former removes all native styling including accessibility roles.
  • Forgetting that base-select is not yet in the CSS Baseline 閳ユ攣lways test and provide a readable native select as fallback.

verification

  1. Test the select in Chrome 135+ to confirm the custom styling renders correctly with the picker icon and checkmarks.
  2. Test in Firefox and Safari to verify the select falls back to a readable native appearance.

FAQ

Questions about Customizable Select Generator

What is the difference between appearance: none and appearance: base-select?

appearance: none strips ALL native select styling, including the dropdown arrow, and can break accessibility. appearance: base-select keeps the native semantics and keyboard behavior while allowing you to style the visual parts (icon, checkmark, popover). base-select is the safe way to customize selects.

Which browsers support customizable select?

Chrome 135+ with "Experimental Web Platform Features" enabled. This is a very new feature and not yet in CSS Baseline. For production, use @supports (appearance: base-select) to apply custom styles only in supporting browsers and show the native select as fallback elsewhere.

Related tools

More html tools

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool

Also try

Also try

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool