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.
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.
Conclusion
To remove the default arrow icon from a dropdown list (select element) with CSS, we set the appearance
property.