Sometimes, we want to style a select dropdown with only CSS.
In this article, we’ll look at how to style a select dropdown with only CSS.
How to style a select dropdown with only CSS?
To style a select dropdown with only CSS, we can set the background-image
to a new arrow icon.
For instance, we write
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(...);
}
to set the appearance
to none
to remove the existing drop down arrow.
Then we set the background-image
to the url
of the arrow we want to show.
Conclusion
To style a select dropdown with only CSS, we can set the background-image
to a new arrow icon.