CSS - remove default arrow icon from select HTML element

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

Quick solution:

// ONLINE-RUNNER:browser;

<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>