Customizable select #CSSWrapped 2025

Key Concepts

• Customizable Select: A new CSS feature allowing for styling of <select> dropdowns.
• appearance: select: CSS property enabling the new styling capabilities for select elements.
• ::picker Pseudo-element: A functional pseudo-element used to style the dropdown list (picker) itself.
• ::selected-content Pseudo-element: A functional pseudo-element reflecting the HTML content of the currently selected option.
• Top Layer Support: Ensures the picker appears above other content on the page.
• Progressive Enhancement: Utilizing the new API while maintaining functionality in older browsers.

Styling Select Elements with CSS – A New Era

The core announcement centers around the introduction of customizable select elements via CSS, a long-awaited feature for web developers. Historically, styling <select> dropdowns has been notoriously difficult, often requiring complex JavaScript workarounds or relying on browser-specific hacks. This new functionality, available through the appearance: select property applied to the <select> element, fundamentally changes this. Applying this property unlocks the ability to style the select element directly with CSS.

The Role of Pseudo-elements: ::picker and ::selected-content

Two new functional pseudo-elements are central to this customization: ::picker and ::selected-content. The ::picker pseudo-element targets the dropdown list itself – the popover containing the options. This allows developers to control its visual presentation, including positioning, background, and overall layout. Importantly, the ::picker benefits from built-in features like top layer support, which ensures the dropdown appears above other page elements, preventing it from being obscured. It also includes automatic repositioning in the viewport, meaning the dropdown intelligently adjusts its position to remain visible even when the user scrolls.

The ::selected-content pseudo-element provides access to the HTML content of the currently selected option. This is a significant improvement, as it allows developers to display a customized representation of the selected choice within the select button itself.

Enhanced Option Content & Real-World Applications

The new API allows for the inclusion of non-interactive content within the <option> elements. This means developers can add icons, images, or descriptive text directly alongside the option’s label. The example presented demonstrates displaying an image and the option name. This flexibility opens up possibilities for richer and more visually appealing select menus.

A compelling real-world application showcased is an emoji picker. In supported browsers, the emoji picker utilizes the new CSS features to present a fully styled, horizontally aligned list of emojis. This demonstrates the potential for creating highly customized and user-friendly select interfaces.

Progressive Enhancement and Browser Compatibility

A key benefit of this approach is its support for progressive enhancement. Because the API builds upon the existing <select> element, users in browsers that don’t yet support the new features will still have access to a functional, albeit unstyled, select menu. This ensures a consistent user experience across different browsers and devices. The speaker emphasizes that even in unsupported browsers, the core functionality of the select element remains intact.

Technical Details & Resources

The feature leverages functional pseudo-elements, a relatively recent addition to CSS, to provide targeted styling capabilities. These pseudo-elements allow developers to style specific parts of the element without needing to modify the underlying HTML structure.

Further information and examples can be found at chrome.dev/csswrapped and specifically [chrome.dev/csswrapped 2022](chrome.dev/csswrapped 2022), which details all the UI features shipped in Chrome.

Conclusion

The customizable select feature represents a major step forward in web development, providing developers with the long-awaited ability to fully style dropdown menus with CSS. The combination of the appearance: select property, the ::picker and ::selected-content pseudo-elements, and the principle of progressive enhancement creates a powerful and flexible solution for creating modern, accessible, and visually appealing select interfaces. The speaker’s assessment – that this is an “absolute gamechanger” – highlights the significant impact this feature is expected to have on web design and development.