Why Can't I Hide Elements in a Menu Using CSS in Chrome?

How to Hide Elements Selectively Within Menus Using CSS: A Conundrum

Question:

For some perplexing reason, I have noticed that Chrome stubbornly refuses to conceal

elements within a menu, while Firefox appears to have no such qualms. I am tasked with obscuring specific elements that satisfy certain search parameters. However, while the Chrome debugging tools accurately show that my JavaScript is setting the display style of these elements to none, they mysteriously reappear when the menu is activated. What sorcery is this? How can I prevent the display of these elements when the menu is expanded?

Answer:

To effectively conceal

elements that match your search criteria and prevent their reappearance upon menu activation, consider employing the 'hidden' attribute, which is supported by HTML5.

<option hidden>Hidden option</option>

This attribute offers a reliable means of suppressing the visibility of specific options. It is important to note that Internet Explorer versions prior to 11 do not support this attribute. If your requirement is to conceal only a limited number of

elements, it may be advantageous to strategically utilize the 'hidden' attribute in conjunction with the 'disabled' attribute, as opposed to removing and re-inserting elements or resorting to semantically ambiguous approaches.

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

The above is the detailed content of Why Can't I Hide Elements in a Menu Using CSS in Chrome?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 firefox css chrome if for while select using Attribute number this display

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：How to Effectively Use HTML `` and `` Backgrounds?Next article：How to Effectively Use HTML `` and `` Backgrounds?

Related articles

See more

• Summary of what you must pay attention to about Border when writing CSS
• How to realize multi-style selection and real-time switching of styles_Experience exchange
• Detailed usage analysis of marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

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

About usDisclaimerSitemap

© php.cn All rights reserved