W3docs
en
Log in

How to Remove Default Arrow Icon from a Dropdown List

In this snippet, we’re going to demonstrate how you can remove the default arrow icon from a dropdown list. For that, you can use the appearance property.

Tags

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. For cross-browser compatibility, include the standard appearance property along with -webkit-appearance and -moz-appearance prefixes. Vendor prefixes ensure support across older browser versions, while the standard property handles modern browsers. You can also specify the width to control the dropdown size.

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;
        -moz-appearance: none;
        appearance: none;
        width: 50px;
      }
    </style>
  </head>
  <body>
    <select>
      <option>HTML</option>
      <option>CSS</option>
    </select>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <select> <option>HTML</option> <option>CSS</option> </select> </div>### Example of removing the default arrow icon from a dropdown list using a custom background arrow:

Example of removing the default arrow icon from a dropdown list using a custom background arrow

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .dropdown {
        width: 100%;
        position: relative;
      }
      select {
        width: 100%;
        padding: 8px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5"><path d="M0 0l5 5 5-5z" fill="%23333"/></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 10px 5px;
      }
    </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>
Try it Yourself »