Customizing the HTML <select> element has always been a challenge. Often we needed to rely on JavaScript or third-party libraries to get a consistent look. But now with only CSS, especially the new appearance: base-select property and related pseudo-elements, we can finally customise select fields with ease —no JavaScript required!

In this post, I’ll walk you through building a beautiful select field and show you how to style every part of it using pure CSS.

The HTML Structure

Here’s the select field we’ll be working with:

Notice the use of a <button> and a custom <selectedcontent> element inside the select. This allows us to style the selected option in a more flexible way.

Opting In to Custom Styling

The first step is to opt in to custom select styling by using the new appearance: base-select property:

This tells the browser to use the new, customizable version of the select field, unlocking a range of new styling possibilities.

Styling the Select Field

With the new appearance, you can style the select element just like any other input field

Customizing the Picker Dropdown

The ::picker(select) pseudo-element allows you to style the dropdown itself.

The anchor() function lets you precisely position the dropdown relative to the select field.

Styling the Options

You can style each option with focus, hover and checked state.

Show a custom checkmark for the selected option using the ::checkmark pseudo-element.

Customizing the Selected Content

The <selectedcontent> element inside the button can also be styled, letting you control the layout of the selected option.

Animating the Picker

With the new popover and animation features, you can smoothly animate the dropdown as it opens and closes:

Styling the Picker Icon

Even the dropdown arrow can be styled and animated:

Conclusion

With these new CSS features, customizing a select field is easier and more powerful than ever. You can control every aspect of the select, from the field itself to the dropdown, options, and icons. This unlocks a world of creative UI possibilities.

Hope you learned something.