How to Hide Option in Select Menu with CSS ?

Last Updated : 06 Jun, 2023

In HTML, the <select> tag creates a drop-down list of options for the user to choose from. Sometimes, you may want to hide certain options from the user for various reasons. This can be achieved using CSS by applying the display: none property to the <option> tag that you want to hide.

Syntax:

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

Here, value-to-hide is the value of the <option> that you want to hide. You can replace this with the actual value of the option that you want to hide.

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

Add a select tag in your HTML file and add multiple options to it.
Assign a value to each option.
Open your CSS file and write the syntax mentioned above to hide the option(s) you want to hide.
Save the CSS file and refresh the HTML file to see the changes.

Example:

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:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Set the title of the page -->
    <title> 
        Hide Option in Select Menu using CSS 
    </title> 
  
    <!-- Define the CSS styling for the page -->
    <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>