How to Hide Option in Select Menu with CSS ?

Last Updated : 09 Oct, 2024

In HTML, the <select> tag creates a dropdown menu for user selection. Hiding certain options with CSS allows them to remain in the code but be invisible to users. This technique is useful for conditional display or future reactivation without code changes.

Syntax

select option[value="value-to-hide"] {
     display: none;
}

Approach

To hide a specific option in a select menu using CSS, you need to follow the following steps:

Create a <select> Tag: Add a <select> element and multiple <option> elements in HTML.
Assign Value Attributes: Set a unique value attribute for each <option>, like value="apple".
Apply CSS to Hide Options: Use display: none; in CSS to hide specific options.
Update and Test: Save changes, refresh the page, and verify the hidden option is not visible.

Example: In this example we hides an option in a dropdown menu using CSS. The select option[value="option3"] { display: none; } rule makes "Option 3" invisible while keeping it in the HTML code.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Hide Option in Select
        Menu using CSS
    </title>

    <style>
        /* This CSS rule hides the option 
        with a value of "option3" */
        select option[value="option3"] {
            display: none;
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>

        <!-- This option will be hidden -->
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
</body>

</html>

Output:

Example 2: In this example we use CSS to hide odd-numbered options in a dropdown menu. The rule select option:nth-child(odd) { display: none; } hides "Option 1" and "Option 3" while keeping them in the code.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Hide Option in Select Menu using CSS
    </title>
    <style>
        select option:nth-child(odd) {
            display: none;
        }
    </style>
</head>

<body>
    <!-- Create a heading with green color -->
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <!-- Create another heading -->
    <h1>Example 2</h1>

    <!-- Create a select menu with four options -->
    <select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
</body>

</html>