How to remove the default arrow icon from a dropdown list?

04 Jul, 2022
Dropdowns are graphical control elements that allow a user to choose a value from a list of values. They are prominent in web-based forms where a certain input is required out of a fixed set of values. In web pages, the HTML elements select and option are used to implement a drop-down list. You can learn about these tags and their implementation from here and here.
Let’s start by looking at an example drop-down list implementation. The below example implements a drop-down list with options to select the difficulty level of a problem from a set of available options.Example:
<!DOCTYPE html> <html>   <head>    <title>Remove Arrow From Dropdown</title>   </head>    <body>    <h1 style="color: #008000">GeeksforGeeks</h1>    <b>      How to remove the default arrow       icon from a dropdown list?    </b>    <p>      A sample dropdown list for difficulty       level of a problem:    </p>    <div class="dropdown-container">      <!-- This is our drop-down element -->      <select>        <option value="none" selected disabled hidden>            Select difficulty level.... </option>         <option>School</option>        <option>Basic</option>        <option>Easy</option>        <option>Medium</option>        <option>Hard</option>      </select>    </div>        </body></html>
Output:
Before clicking the list:
After clicking the list:
Now, we want to remove the default arrow icon (▼) that appears on the dropdown list.This can be done by altering the -moz-appearance or -webkit-appearance CSS property of the select tag.After opening the above HTML code in a browser, if you explore the webpage using chrome’s dev tools, you will notice that the value of the “-webkit-appearance” property is set to “menulist” by default for the select element.It is this value that we have to alter. Setting this property to “none” will do the job. It explicitly tells the browser to not assign any other value to that property, which in turn results in the removal of the default arrow icon.Example:
<!DOCTYPE html> <html>   <head>    <title>Remove Arrow From Dropdown</title>          <style>      /* apply CSS to the select tag of          .dropdown-container div*/        .dropdown-container select {        /* for Firefox */        -moz-appearance: none;        /* for Safari, Chrome, Opera */        -webkit-appearance: none;      }        /* for IE10 */      .dropdown-container select::-ms-expand {        display: none;      }    </style>         </head>    <body>    <h1 style="color: #008000">GeeksforGeeks</h1>    <b>      How to remove the default arrow      icon from a dropdown list?    </b>    <p>      A sample dropdown list for difficulty       level of a problem:     </p>    <div class="dropdown-container">      <!-- This is our drop-down element -->      <select>        <option value="none" selected disabled hidden>             Select difficulty level....         </option>         <option>School</option>        <option>Basic</option>        <option>Easy</option>        <option>Medium</option>        <option>Hard</option>      </select>    </div>        </body></html>
Output:
Before clicking the list:
After clicking the list:
Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools-webkit-appearance/-moz-appearance: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance-ms-expand: https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-expand
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
amarjeet_singh
CSS-Misc
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.