How to Remove Default Arrow Icon from a Dropdown List

Solutions with CSS

If you don’t need the default arrow icon, you can remove it from a dropdown list using the CSS appearance property and specifying the width.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of removing the default arrow icon from a dropdown list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      select {
        -webkit-appearance: none;
        width: 50px;
      }
    </style>
  </head>
  <body>
    <select>
      <option>HTML</option>
      <option>CSS</option>
    </select>
  </body>
</html>

Result

Example of removing the default arrow icon from a dropdown list using the !important rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .dropdown {
        width: 100%
      }
      select {
        -webkit-appearance: none;
        appearance: none;
      }
      @-moz-document url-prefix() {
        .dropdown {
          border: 1px solid #000;
          border-radius: 4px;
          box-sizing: border-box;
          position: relative;
          overflow: hidden;
        }
        .dropdown select {
          width: 110%;
          background-position: right 30px center !important;
          border: none !important;
        }
      }
    </style>
  </head>
  <body>
    <div class="dropdown">
      <select>
        <option>Learn HTML</option>
        <option>Learn CSS</option>
        <option>Learn Git</option>
        <option>Learn JavaScript</option>
        <option>Learn PHP</option>
      </select>
    </div>
  </body>
</html>