Blog & News

There are a whole host of new and exciting CSS features that were rolled out in 2025, many of which are supported by the latest editions of Chromium browsers already in 2026. A list of these new features are described in the CSS Wrapped 2025 article by the Chrome dev team.

A Brief Look At New Features

Simple, Beautiful Select Elements in 2026

Today we'll be looking primarily at the new options for <select> elements and how they give developers much more control over the element and remove the need for unwieldy JavaScript solutions that would often be used to bring drop-down boxes into alignment with the rest of a site's theme. Many JS solutions that have been popularized over the years are either so heavy that they become a problem for optimization (especially an issue for mobile users), or so light that they didn't properly handle all of the native functionality of a <select> element resulting in lost accessibility functionality.

The browser's in-built <select> element automatically handles many necessary functions for mobile responsiveness, ensuring the drop-down is visible either above or below the element depending on the current view state when the element is interacted with, option readability and browsability via keyboard, alternative select views for small devices (such as the pop-up you get on many phones when pressing a select that is different from the fly-out you might get on a desktop), native indexing, and more. Replacing all of these features with JavaScript just to make something look better has often been a painful choice for developers, because allowing a whole component to just not match the rest of your styles can make your product seem cheap, but having a heavy script to handle all of these features (and making sure that script stays up to date with modern browser features over time) is a high price to pay for appearances.

So it's really good news that this problem is being addressed in CSS itself! Let's look at what can be done with the new features. First, we need to enable the new features with CSS like so:

@supports(appearance: base-select) {
	select,
	select::picker(select) {
		appearance: base-select;
	}
}

This CSS simply enables the new features on your <select> element, and the dropdown ::picker pseudo-element. By default this is a progressive enhancement because browsers which don't support appearance: base-select; yet will simply ignore your styling of the pseudo-elements. If you want to make changes to your select elements directly and worry about any damage that might cause to older browsers, you can be extra safe by including the @supports query as we show here.

Once you've enabled the new features, you can style the ::picker pseudo-element just like you would any other element. Check out some of what we can do in this codepen.

See the Pen Base-Select Feature Fun by Isaac Hall (@Isaac-Hall) on CodePen.

We have total control over the dropdown just like we would if we created our own in HTML and used JavaScript to make it function, but this time all the functionality is already handled by the browser, and our code remains completely accessibility-compliant with no extra work. We can add images, extra elements, descriptions, and anything else we like to the select options and control their display with CSS.

As an added bonus, we used the new sibling-index() feature inside our animation delay to cause each option to fade in at a different speed based on its index in the <select>.

option {
	transition: opacity 200ms ease, translate 500ms ease;
	transition-delay: calc(200ms * (sibling-index() - 2));

	@starting-style {
		opacity: 0;
		translate: 15px 0;
	}
}

Using sibling-index() in a transition delay lets each element get a different delay because they are all at a different index, creating a nice swinging-in effect when the select is opened. There are probably a million better ways to use this feature, but this gets the point across. Note that we arbitrarily offset the index by -2 because we don't want it to count the base <button> element or the first default <option> siblings, so we just subtract them from the count on each option.

Considering all these fantastic tools that were rolled out in 2025, we're excited to see what comes along in 2026.

Note: The CSS features described in this blog were not fully supported in all browsers at the time this post was written. Consider checking in with caniuse.com before using them in production environments.