Switching It Up: HTML's Latest Control Revolution

The End of Form Control Frustration

For decades, the HTML <select> element has been the ugly duckling of web forms. Developers dreamed of styling dropdowns to match their designs, but the browser-rendered native control stood firm against customization. Custom select components required hundreds of lines of JavaScript, complex ARIA management, and constant maintenance for accessibility compliance.

That era is ending. HTML and CSS have converged on a solution that delivers the best of both worlds: a fully styleable, accessible native control that works seamlessly across browsers. The new appearance: base-select CSS property unlocks a redesigned <select> element that accepts rich HTML content, supports custom styling, and maintains complete JavaScript API compatibility.

The implications ripple through every web development project. Form designers gain creative freedom without sacrificing accessibility. Development teams eliminate thousands of lines of custom dropdown code. Performance improves as browsers render a single native element instead of complex JavaScript-powered alternatives. For teams building modern web applications, this represents a significant leap forward in frontend development efficiency.

Understanding appearance: base-select

The appearance: base-select CSS property represents the single most significant change to form controls in modern web history. When applied to a <select> element--along with its corresponding ::picker(select) pseudo-element--the browser transitions the select from its traditional native rendering to a configurable, styleable state.

.custom-select,
.custom-select::picker(select) {
 appearance: base-select;
}

This CSS declaration fundamentally alters how the browser handles the <select> element. The parser begins accepting rich HTML content within <option> elements that previously would have been stripped or ignored. Internal structural pseudo-elements become available for granular styling. The dropdown panel transforms from an OS-level native control into a renderable element positioned with standard CSS, including anchor positioning for precise placement relative to the trigger button.

What's Different in Base-Select Mode

When appearance: base-select activates, several fundamental behaviors shift:

• The select no longer renders outside the browser's viewport area
• Mobile devices no longer trigger their native OS-level select panels
• The element abandons its default behavior of sizing to accommodate the longest option text
• Full CSS control becomes available for all visual aspects of the control

These changes reflect intentional trade-offs in the design. The ability to fully style the select comes with the responsibility of handling positioning, responsive behavior, and mobile experience considerations. This aligns with broader trends in CSS-driven interfaces where developers gain more control over native browser components.

Rich HTML Content in Options

Perhaps the most immediately useful new capability involves HTML content within <option> elements. Before appearance: base-select, browsers stripped any HTML within options--the parser literally removed images, SVGs, and complex markup, leaving only text content. Developers who needed icons alongside dropdown options resorted to CSS pseudo-elements with background images, fragile positioning workarounds, or abandoned native selects entirely.

<select class="custom-select">
 <option value="html">
 <svg aria-hidden="true" width="20" height="20">
 <use href="/icons/html5-logo.svg#icon"></use>
 </svg>
 <span>HTML</span>
 </option>
 <option value="css">
 <svg aria-hidden="true" width="20" height="20">
 <use href="/icons/css3-logo.svg#icon"></use>
 </svg>
 <span>CSS</span>
 </option>
 <option value="js">
 <svg aria-hidden="true" width="20" height="20">
 <use href="/icons/javascript-logo.svg#icon"></use>
 </svg>
 <span>JavaScript</span>
 </option>
</select>

Browser rendering of this code now displays SVG icons alongside option text. Chrome 135 and later fully support the feature, while other browsers fall back to displaying only the text content within options.

Use Cases for Rich Option Content

• E-commerce: Product thumbnails within sort and filter dropdowns
• Country Selectors: Flag icons alongside country names
• Status Indicators: Colored dots or icons indicating item status
• Shipping Methods: Carrier logos with delivery time and pricing information

This pattern creates intuitive, scannable dropdown options that help users make faster decisions without requiring custom dropdown components. E-commerce teams looking to optimize their product listing pages will find this particularly valuable.

The selectedoption Element

Beyond option content, the new <selectedoption> element provides granular control over how the currently selected value appears in the select's closed state. When a user selects an option, the content displayed in the button reflects what <selectedoption> contains--allowing designs that differ between the dropdown button and the expanded option list.

<select name="country" class="country-select">
 <button>
 <selectedoption></selectedoption>
 </button>
 <option value="" hidden>
 <span>Select a country</span>
 </option>
 <option value="us">
 <img src="/flags/us.svg" alt="United States" />
 <span>United States</span>
 </option>
 <option value="ca">
 <img src="/flags/ca.svg" alt="Canada" />
 <span>Canada</span>
 </option>
</select>

The <selectedoption> element is empty by default, causing the browser to use the selected option's text content. When populated explicitly, its contents replace that default behavior. This enables designs where the selected state shows a simplified representation--a flag icon alone--while expanded options display full country names and additional information.

Technical Considerations

The browser continues using traditional value attributes for form data--the visual representation in <selectedoption> doesn't affect what gets submitted. Developers adding rich visual content should verify their value retrieval logic when accessing selected values through JavaScript. The selectedContent property returns the DOM elements within <selectedoption> rather than traditional text content. This level of control is particularly valuable for advanced form implementations.

Horizontal Rules in Select Elements

A seemingly small addition that fills a significant gap: the <hr> element now renders within <select> dropdowns as visual separators. Developers previously lacked any native mechanism for visually dividing option groups within selects. The workarounds--creating empty options with borders, inserting non-selectable options as dividers--created accessibility problems and maintenance headaches.

<select name="priority">
 <option value="low">Low Priority</option>
 <option value="medium">Medium Priority</option>
 <option value="high">High Priority</option>
 <hr />
 <option value="critical">Critical - Urgent</option>
</select>

The <hr> renders as a subtle horizontal line separating option groups. Combined with <optgroup> elements for semantic grouping, dropdowns can now present complex option sets with clear visual hierarchy.

Semantic Grouping with optgroup

<select name="product">
 <optgroup label="Electronics">
 <option value="laptop">Laptop Computers</option>
 <option value="tablet">Tablets</option>
 <option value="phone">Smartphones</option>
 </optgroup>
 <hr />
 <optgroup label="Accessories">
 <option value="headphones">Headphones</option>
 <option value="keyboard">Keyboards</option>
 <option value="mouse">Mouse Devices</option>
 </optgroup>
</select>

The <optgroup> provides semantic meaning for screen readers and accessibility tools. The <hr> provides visual separation that helps users quickly scan option categories. Together, they create dropdowns that are both accessible and visually clear, following accessibility best practices.

Browser Support and Progressive Enhancement

Current Implementation Status

Chrome 135 became the first production browser to implement appearance: base-select with full feature support. The implementation followed years of specification work through the W3C Open UI initiative, with representatives from Chrome, Safari, Firefox, and Microsoft participating in the design process.

The specification design explicitly prioritizes progressive enhancement. Browsers that don't support appearance: base-select render traditional native selects--the CSS declaration simply has no effect. Sites can begin using the new features today, knowing that unsupported browsers gracefully fall back to familiar behavior.

Testing for Support

CSS feature queries provide the standard mechanism for detecting base-select support:

@supports (appearance: base-select) {
 .custom-select,
 .custom-select::picker(select) {
 appearance: base-select;
 }
 
 .custom-select {
 /* Enhanced styling for supporting browsers */
 min-height: 48px;
 padding: 8px 40px 8px 16px;
 }
}

This pattern allows sites to provide enhanced styling in supporting browsers while maintaining baseline appearance elsewhere. Progressive enhancement is a core principle of modern web development.

Performance and Implementation Best Practices

Performance Advantages

Native <select> elements with appearance: base-select offer significant performance advantages over JavaScript-based dropdown components:

• Single Element Rendering: The browser renders one element with native event handling
• No JavaScript Overhead: No framework code processes clicks or calculates positions
• Native Focus Management: Browser handles accessibility automatically

Core Web Vitals Benefits:

• Cumulative Layout Shift: Browser controls dropdown positioning
• First Input Delay: Native event handlers respond immediately
• Interaction to Next Paint: Browser handles visibility transitions

Accessibility Considerations

The native <select> maintains its accessibility superpowers through the transition to base-select. MDN's documentation confirms that:

• Screen readers announce options correctly
• Keyboard navigation continues functioning as expected
• Focus management remains handled by the browser

Developers must preserve semantic structure when customizing appearance. The <button> element that wraps <selectedoption> provides the correct accessible name and interaction pattern. These improvements contribute directly to better Core Web Vitals scores.

Strategic Considerations for Adoption

When to Use Base-Select

The new select capabilities suit projects where visual customization, performance, and accessibility all matter:

• Marketing Sites: Branded form designs without JavaScript overhead
• Enterprise Applications: Maintainable code replacing custom dropdown components
• E-commerce Platforms: Improved Core Web Vitals by eliminating dropdown-related layout shifts

Projects with minimal form customization needs may find traditional native selects sufficient--the new features add complexity without benefit when simple native appearance satisfies design requirements.

Migration Strategy

1. Identify Opportunities: Find selects where current implementation overhead outweighs customization needs
2. Replace Gradually: Begin with low-risk dropdowns, validate in staging environments
3. Test Thoroughly: Verify accessibility, functionality, and visual requirements
4. Maintain Fallbacks: Keep custom components for features not yet implemented in base-select

When to Stick with Custom Components

• Multi-select requirements (not yet supported in base-select)
• Complex filtering within dropdowns
• Async option loading patterns

Our web development team can help evaluate your current form implementations and identify opportunities to leverage these new native capabilities. We specialize in building high-performance custom web applications that take advantage of the latest browser features.

The Future of Form Controls

Beyond Select

The appearance: base-select implementation establishes a pattern for future form control enhancements. The Open UI specification describes similar treatments for other native controls--checkboxes, radio buttons, and text inputs may eventually receive parallel treatment.

This approach benefits the entire web ecosystem:

• Faster Feature Release: New capabilities reach developers through standards rather than framework adoption cycles
• Browser Competition: Vendors compete on implementation quality rather than feature sets
• User Consistency: Native controls behave consistently across websites

Building Today for Tomorrow

The new select features represent the web platform maturing to meet modern development expectations:

• Designers receive creative control they've long sought
• Developers simplify codebases by removing custom component implementations
• Users enjoy faster, more accessible experiences

The years of specification work, browser implementation, and community feedback that produced appearance: base-select demonstrate how thoughtful platform evolution serves everyone's interests. Adopting these features now positions projects to benefit from ongoing platform improvements while delivering better experiences today. The familiar <select> element--just switched up with new capabilities--awaits your next form design. Partner with our experienced development team to modernize your web forms today.

Sources

1. Chrome for Developers - The select element can now be customized with CSS
2. Frontend Masters - Relatively New Things You Should Know about HTML Heading Into 2025
3. Chrome for Developers - RFC Customizable Select
4. Open UI - Customizable Select Component
5. MDN - Customizable Select