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

Last Updated : 11 Oct, 2024

Removing the default arrow icon from a dropdown list (<select> element) means hiding the built-in down-facing arrow provided by the browser. This allows for custom styling of the dropdown, giving developers control over its appearance using custom icons or designs.

Here we have some common approaches:

Table of Content

Using Custom Styling to Remove the Default Arrow
Using e -moz-appearance, -webkit-appearance

Using Custom Styling to Remove the Default Arrow

This approach uses CSS to remove the default arrow from a dropdown (<select> element) by applying custom styles. Techniques include setting background properties or hiding the default appearance, allowing for custom dropdown designs without the default browser icon.

Example 1: In this example we example creates a dropdown list for selecting difficulty levels. It includes options like "School" and "Hard" while demonstrating how to potentially remove the default arrow icon using custom styling.

html

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

Using e -moz-appearance, -webkit-appearance

The approach uses CSS properties -moz-appearance: none; and -webkit-appearance: none; to eliminate the default dropdown arrow in Firefox, Safari, and Chrome. Additionally, select::-ms-expand { display: none; } is used for Internet Explorer.

Example: In this example we demonstrates how to remove the default arrow from a dropdown list using CSS properties like -moz-appearance, -webkit-appearance, and hiding it in Internet Explorer with select::-ms-expand.

html

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