如何可靠地隐藏 HTML5 选择菜单中的选项？

使用 CSS 在 HTML5 选择菜单中隐藏选项

尽管能够隐藏 Firefox 中的元素使用 display: none; CSS、Chrome 提出了一个挑战，即单击 后会显示隐藏选项。菜单。这就提出了如何有效隐藏符合搜索条件的选项，同时防止它们在打开菜单时重新出现的问题。

解决方案：利用隐藏属性

对于 HTML5 兼容的浏览器，隐藏属性提供了有效的解决方案。此属性从视图和选择中隐藏该选项，确保无论菜单交互如何，它都保持不可见。

<option hidden>Hidden Option</option>

需要注意的是，11 以下的 IE 版本不支持隐藏属性。但是，如果您主要关心的是隐藏少量选项，那么与涉及添加或删除元素或违反语义的更复杂技术相比，组合隐藏和禁用属性可提供实用的解决方案约定。

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

以上是如何可靠地隐藏 HTML5 选择菜单中的选项？的详细内容。更多信息请关注PHP中文网其他相关文章！