[Edit]

CSS - remove default arrow icon from select HTML element

1 contributors

2 contributions

0 discussions

9 points

Created by:

Marley-Marks

712

In this short article, we would like to show how to remove default arrow icon from select HTML element using CSS.

Quick solution:

xxxxxxxxxx
 
<style>
​
    select {
        -webkit-appearance: none;  /* removes expand icon in older Chrome versions  */
        -moz-appearance: none;     /* removes expand icon in older Firefox versions */
        appearance: none;          /* removes expand icon                           */
    }
​
    select::-ms-expand {           /* removes expand icon in IE10                   */
        display: none;
    }
​
</style>
​
<select>
  <option>New York</option>
  <option>London</option>
  <option>Tokyo</option>
</select>