How Can I Reliably Hide Options in HTML5 Select Menus?

Hiding Options in HTML5 Select Menus with CSS

Despite the ability to hide elements in Firefox using display: none; CSS, Chrome poses a challenge by displaying hidden options upon clicking the menu. This raises the question of how to effectively hide options that match search criteria while preventing their reappearance when the menu is opened.

Solution: Utilizing the hidden Attribute

For HTML5-compliant browsers, the hidden attribute provides an effective solution. This attribute conceals the option from both view and selection, ensuring that it remains invisible, regardless of menu interaction.

<option hidden>Hidden Option</option>

Copy after login

It's important to note that the hidden attribute is not supported in IE versions below 11. However, if your primary concern is hiding a small number of options, combining the hidden and disabled attributes offers a pragmatic solution compared to more complex techniques involving adding or removing elements or violating semantic conventions.

Option1 Option2 <option hidden>Hidden Option</option>