The Problem with Traditional Select Elements
For years, web developers have struggled with the limited styling capabilities of the traditional <select> element. The drop-down menu, the arrow icon, and the selected option display have all been controlled by the operating system, making it nearly impossible to create truly custom select experiences without reaching for JavaScript libraries.
The traditional <select> element has always been a black box from a styling perspective. When you add a <select> to your page, the browser hands off control of the dropdown menu to the operating system. This means your CSS has no effect on the appearance of the options popup, the arrow icon, or how options are displayed.
Developers have workaround this limitation by either accepting the native appearance or by hiding the original select and rebuilding the entire dropdown experience with custom JavaScript and HTML. Custom JavaScript solutions introduce accessibility concerns, keyboard navigation challenges, and additional maintenance overhead. The <select> element has always been one of the most complex pieces of HTML, handling accessibility, mobile interactions, and form submission entirely through native browser functionality.
Our web development services team specializes in implementing modern HTML and CSS techniques that reduce JavaScript dependencies while improving performance and user experience across your entire application.
The Evolution of the Selectmenu Proposal
The web standards community has been working on a solution for this problem for years. The original proposal was to introduce a new <selectmenu> element that would provide a completely separate, styleable dropdown experience.
However, the standards process evolved to recognize that a better approach was possible. The new direction, now officially in Stage 2 at WHATWG with strong cross-browser interest, takes a more progressive enhancement approach building on top of the existing <select> and <option> syntax that developers already know. As documented by That HTML Blog's analysis of the selectmenu evolution, this approach means you don't need to learn entirely new elements or semantics.
Instead, you use the familiar <select> element with some additional HTML structure and CSS declarations to unlock full styling control. This progressive enhancement philosophy aligns with modern web development best practices, where you build on existing standards rather than replacing them entirely. The evolution from <selectmenu> to enhanced <select> demonstrates how the web platform continues to evolve based on developer feedback and real-world implementation experience.
When building modern web applications, working with established standards rather than custom implementations leads to better long-term maintainability and browser compatibility. Our approach to front-end development follows these same principles of leveraging native browser capabilities wherever possible.
Opting Into Custom Select Rendering
The key to enabling custom select styling is a simple CSS declaration. By applying appearance: base-select to both the <select> element and its ::picker(select) pseudo-element, you effectively switch off the native OS styling and give yourself full control.
select,
::picker(select) {
appearance: base-select;
}
This single declaration transforms the <select> from an opaque OS-controlled element into a fully styleable component. This CSS tells the browser to use a minimalist base style for both the closed select button and the open dropdown picker, creating a blank canvas for your custom styles. The approach mirrors how the <dialog> element works in modern HTML, providing a basic structure that you can then enhance with your own design.
From this foundation, you can customize every aspect of the dropdown experience, from the button appearance to the option items and everything in between. This level of control means your select elements can perfectly match your design system's visual language, rather than being tied to the browser's default styling. Our UI/UX design services can help you create cohesive design systems that leverage these native capabilities for consistent user experiences.
The Select Button Structure
To customize what appears in the closed state of the select element, you add a <button> element as the first child inside the <select>. This <button> replaces the default select button that would normally be rendered by the browser.
Inside this button, you can include arbitrary HTML content to display whatever you want. The button acts as the trigger for opening the dropdown picker, but its contents are entirely under your control. This structure means you can include icons, images, formatted text, or any other visual elements in your select button without being limited to plain text.
<select id="pet-select">
<button>
<selectedcontent></selectedcontent>
</button>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
</select>
The <selectedcontent> element provides an elegant solution for displaying the currently selected option inside the select button. When you include this element, the browser automatically clones the content from the currently selected <option> and displays it within the button. This eliminates the need for JavaScript to keep the button display in sync with the selected option, reducing complexity and potential bugs in your code. For more on reducing JavaScript dependencies in your forms, see our guide on toggle visibility when hiding elements.
Key Pseudo-Elements for Styling
The Dropdown Picker with ::picker(select)
The ::picker(select) pseudo-element targets the entire dropdown picker, including all elements inside the <select> except the first child <button>. This is where you define the styles for the dropdown container, including its positioning, background, borders, shadows, and animations. You can use standard CSS layout techniques to arrange the options, create grouped sections, or add custom header and footer content to your dropdown.
Styling the Picker Icon
The ::picker-icon pseudo-element allows you to style or replace the dropdown arrow icon. By default, browsers render a small arrow or chevron to indicate that the element is a select dropdown. With ::picker-icon, you can apply custom styles or hide it entirely and use your own custom icon instead.
The Checkmark with ::checkmark
The ::checkmark pseudo-element targets the checkmark that appears next to the currently selected option. According to MDN's documentation on customizable select elements, you can change its color, size, position, and even replace it entirely with your own custom checkmark design.
These pseudo-elements work together to give you complete control over every visual aspect of your select element, from the button that triggers the dropdown to the individual options within it. For a deeper understanding of how HTML elements and pseudo-elements work together, our guide on comments in HTML provides foundational knowledge.
Progressive Enhancement and Browser Compatibility
One of the most important aspects of this new approach is that it provides progressive enhancement. In browsers that don't support the customizable select features, the <select> element falls back to its traditional behavior, rendering with the native OS styles.
This means you can start using these features today without breaking functionality for users on older browsers. The enhanced styling simply won't apply, and users will see the standard native dropdown they expect. For supporting browsers, the full custom experience appears, creating a better user experience where supported.
As noted in the State of HTML 2025 forms overview, browser support for these features is actively developing with strong cross-browser interest. This approach aligns with modern web development best practices of enhancing experiences progressively rather than requiring cutting-edge features for basic functionality. By designing with progressive enhancement in mind, you ensure that all users can access your forms regardless of their browser choice while providing an enhanced experience for those with modern browsers.
This philosophy extends to our overall approach to technical consulting, where we help clients build future-proof web applications that work across all browser versions.
Performance Benefits of Native Select Elements
Using the native customizable <select> element provides significant performance advantages over JavaScript-based dropdown solutions:
- Faster interactions: The browser handles all interactions directly without JavaScript overhead
- Smaller bundle size: No external libraries or custom JavaScript implementations needed
- Native optimizations: Automatically benefits from browser optimizations and improvements
- Better accessibility: Built-in keyboard navigation and screen reader support without additional code
Accessibility Considerations
The customizable select maintains all the accessibility benefits of the traditional <select> element. The browser continues to handle keyboard navigation, screen reader announcements, focus management, and other accessibility features automatically. Interactive elements included inside the select button are treated as inert by default, ensuring the button functions as a single focusable unit for interaction purposes.
This native implementation is typically faster and more responsive than custom implementations, and it automatically benefits from browser optimizations and improvements. Additionally, the smaller JavaScript footprint improves initial page load times and reduces the complexity of your codebase. For applications where performance matters, choosing native form controls over custom JavaScript implementations is a strategic decision that pays dividends in user experience.
Our performance optimization services focus on these kinds of strategic technical decisions that improve both user experience and site performance metrics. For more on leveraging modern CSS features, explore our guide on the power and fun of scope with CSS custom properties.
Why you should consider using the new HTML select enhancements in your projects
Full Styling Control
Customize every aspect of your select elements, from button appearance to dropdown styling and option layouts.
Rich Content in Options
Include images, icons, and formatted text in your options for enhanced user experience.
Progressive Enhancement
Works seamlessly across browsers, falling back to native selects in older browsers.
Native Performance
No JavaScript required for full functionality, providing better performance than custom implementations.
Built-in Accessibility
Automatic keyboard navigation and screen reader support without additional code.
Animation Support
Add smooth transitions and animations to your dropdown interactions.
Getting Started with Customizable Selects
To implement a customizable select in your project, follow these steps:
- Start with standard
<select>markup using the<option>elements you need - Add a
<button>as the first child inside the<select>to replace the default button - Include
<selectedcontent>inside the button to display the currently selected option - Apply
appearance: base-selectin your CSS to opt into custom styling - Style each component using the pseudo-elements:
::picker(select),::picker-icon, and::checkmark
This approach gives you complete control over the visual appearance while maintaining all the functionality and accessibility benefits of native form controls. A complete example helps illustrate how these pieces fit together--start with standard <select> markup enhanced with a <button> containing <selectedcontent> for the closed state display, add CSS to apply the appearance: base-select declaration, then style each component to match your design system.
The result is a select element that looks and feels like a native component of your application's design language, while maintaining all the accessibility and functionality benefits of the native <select> element. Our web development team has extensive experience implementing these modern HTML and CSS techniques to create performant, accessible form experiences.