How to style a select dropdown with only CSS?

Spread the love

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.

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.

To style a select dropdown with only CSS, we can set the background-image to a new arrow icon.