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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : amarjeet_singh

Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.