How to remove the default arrow icon from a dropdown list (select element) with CSS?

Spread the love

Sometimes, we want to remove the default arrow icon from a dropdown list (select element) with CSS.

In this article, we’ll look at how to remove the default arrow icon from a dropdown list (select element) with CSS.

To remove the default arrow icon from a dropdown list (select element) with CSS, we set the appearance property.

For instance, we write

<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

to add a drop down.

Then we write

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

to set the -moz-appearance and -webkit-appearance properties to none to hide the arrow icon in the drop down.

To remove the default arrow icon from a dropdown list (select element) with CSS, we set the appearance property.