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 set the appearance property.

For instance, we write

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(...);
}

to set appearance to none to remove the default select arrow.

Then we set the background-image property to add our own arrow.

To style a select dropdown with only CSS, we set the appearance property.

By John Au-Yeung