Why Do Hidden Options Show in Chrome's Select Menu?

Hiding Options in a Select Menu with CSS

When hiding elements in a menu using CSS, Chrome displays hidden options when the menu is clicked, unlike Firefox. This can be frustrating when trying to hide options based on specific criteria.

To resolve this issue, consider using the hidden attribute instead of CSS to hide options. This attribute is supported in HTML5 and disables both the visibility and selection of hidden options:

<option hidden>Hidden option</option>

While Internet Explorer versions below 11 do not support hidden, it may be a suitable solution if only a few options need to be hidden. By combining the hidden attribute with disabled, you can prevent hidden options from being accidentally selected:

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

The above is the detailed content of Why Do Hidden Options Show in Chrome's Select Menu?. For more information, please follow other related articles on the PHP Chinese website!

html5 firefox css chrome if while select using Attribute this issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why Does My Console Only Display the First Object When Looping Through an Array of Objects in JavaScript?Next article：Why Does My Console Only Display the First Object When Looping Through an Array of Objects in JavaScript?

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved