How to customize a native html select dropdown
Hello, quick question, I want to create a customized dropdown, like when I click on it, the downward arrow transition to an upward arrow etc. In order to do that, can I use the existing
select html element or I would need to create everything from scratch? Because the thing is I still want to preserve the value obtained from the option element.
4 Replies
MDN Web Docs
Customizable select elements - Learn web development | MDN
This article explains how to create fully-customized <select> elements using experimental browser features. This includes having full control over styling the select button, drop-down picker, arrow icon, current selection checkmark, and each individual <option> element.
The features used in this have limited support
Basically only work on latest chromium
https://discord.com/channels/436251713830125568/1406987357324050492
Here's another question where I asked the same thing. Kevin linked a blog there that talks about creating select with javascript, might help you
Besides the features used in the blog linked above there is no way to customize native select properly except maybe the border
noted, thanks !
To make it work on all browsers, you would have to reset the
appearance and build your own . The good news is once you’ve built it once, you have that component and can reuse it in other projects (that’s the idea anyway; I have a bad habit of failing to do this and just rebuilding every time )
Here’s a post from Stephanie Eckles that should help give you an idea on how to do this.
You could separate your code into two @supports so once the customizable select is supported it will use that block of styling but you have the fallback otherwise that looks like you want it to.
Don’t forget to upvote customizable select for interior 2026!
https://interop-rank.jakearchibald.com/Modern CSS Solutions
Custom Select Styles with Pure CSS | Modern CSS Solutions
Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance. This solution uses CSS grid,
clip-path, and CSS custom properties.Interop Feature Ranking
Rank the web platform features you care most about