Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.



Last Updated : 04 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads