::picker-icon | CSS-Tricks

Experimental: Check browser support before using this in production.
The CSS ::picker-icon pseudo-element allows us to style the icon of a customizable <select> element which is the little triangle that indicates the element is a dropdown menu.
For example, we can change the icon from a triangle to a checkmark:
Notice that the default picker icon is used if the current browser does not support the ::picker-icon pseudo-element.
The specification says that ::picker-icon should work for other HTML form elements in the future, like <input type="date">, <input type="datetime">, and <input type="time">. That means we can expect support for these, and perhaps others, in the future.
The ::picker-icon pseudo-element is defined in the CSS Form Control Styling Level 1.
In other words, we simply declare the pseudo-element and apply styles to it.
There are two requirements for this property to work:
The default picker icon can be modified with any CSS property. However, if you want to change it from the default icon (which is the little triangle for a <select> element), then use the content property. For example, we can swap that triangle out for a plus character instead:
We can apply basic styles to the dropdown using CSS color, background-color, even transitions (as we’ll see in a bit):
It’s also good to note that the <select> dropdown is a flex container by default:
Therefore, it’s a good practice to set align-items to center when using a custom ::picker-icon. For example, this is how the demo above would look without centering:
It looks wonky because the content isn’t aligned to the ::picker-icon. Fixing it with justify-content and align-items makes it look better, like we did in the initial demos.
As you’re already well aware, ::picker-icon is currentyl limited to just <select>, but we’ll be able to use it with:
So here’s a future demo for all of them that should work as support is extended to more form elements:
The default icons should all change to the plus (+) character once browser support arrives.
You can apply transitions/animations to the picker icon using either the animation property when the picker is in its open or closed state using the @starting-style at-rule, or when using only the :open pseudo-class.
For example, we can apply animations on the :open state and :not() when it is closed:
As mentioned, we can also use the @starting-style rule to apply a transition for when the picker icon is in its open state as an alternate method:
We can enhance this even further using :open instead of applying the @starting-style. It’s less verbose than the last two examples:
Here’s a demo that uses an animated GIF for the ::picker-icon.
The CSS ::picker-icon pseudo-element is defined in the CSS Form Control Styling Level 1 specification, which is currently in Editor’s Draft status. That means the information can change between now and when it officially becomes a formal Candidate Recommendation for browsers to implement.
It’s also worth noting the current support for the customizable select element, which is the only element that supports ::picker-icon at the time of writing.
We've got lots of ways to help you connect with the greatest front-end community in all the land.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →