带有显示的 CSS 定位选择选项：在 Safari 和 IE 中不起作用答案

【问题标题】：CSS targeting select option with display:none not working in Safari and IE带有显示的 CSS 定位选择选项：在 Safari 和 IE 中不起作用
【发布时间】：2016-08-13 17:09:56
【问题描述】：

我遇到了一个奇怪的 CSS 问题。

我有一个像这样的 HTML 标记的下拉选择器：

<select id="cat_p" name="cat_p" onchange="ListChildCategories(this.options[this.selectedIndex].value, 0);" class="required validate-list">
    <option value="-1" selected="selected">- Choose a category</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
    <option value="4">Category 4</option>
    <option value="5">Category 5</option>
</select>

现在，我想使用 CSS 隐藏其中一个选择选项（比如说第 5 类），所以我使用以下 CSS 代码：

select#cat_p option[value="5"] {
display: none;
}

结果在 Chrome 和 Firefox 中是完美的，但在 Safari 和 IE 中这个 CSS 不起作用。我检查了 Safari 开发人员面板，我可以看到 CSS 已注册为有效并且它没有被“划掉”/被其他 CSS 覆盖，所以它应该可以工作，我认为.. 很奇怪..

有人知道问题出在哪里吗？

我做了一个小提琴，所以你可以直接看到问题： http://jsfiddle.net/wH8kF/

【问题讨论】：

Select（和其他表单元素）很难在所有浏览器中保持一致的样式，CSS Tricks 上的this article 可能会给您一些想法。
是的，似乎没有真正可靠的跨浏览器 CSS 解决方案来隐藏选择选项元素。我通过更改生成 HTML 的 PHP 脚本解决了我自己的特定问题 - 所以不再需要 CSS，但作为一个 CSS 人，如果某些 CSS 样式选项中没有这种兼容性缺乏的话，我会更喜欢.. 啊好吧，我想事情从来都不是一件容易的事:)
我也是一名 CSS 专家，所以几个月前我深入研究了这个问题。出现这个问题是因为每个浏览器都以另一种方式实现元素。如果您想了解更多信息，请查阅 Shadow DOM ;)
这在哪个版本的 Chrome 中工作？我正在测试版本 32 和 34。你的小提琴在这两个版本中都不适合我。
#Cas，谢谢你的信息，我会调查的。 #Jonathan，我使用的是最新版本的 Chrome，但问题不在于 Chrome。据我测试，“显示：无”不仅在 IE 和 Safari 中有效。正如您在小提琴中看到的那样，当您使用 Chrome 时，我将选择选项隐藏起来。尝试在 IE 或 Safari 中加载 fiddle，您可以看到选择选项没有隐藏。

标签： html css internet-explorer safari

【解决方案1】：

您不能在 Safari 浏览器中使用 toggle 或 display:none 属性或带有选择选项的隐藏/显示。它适用于所有其他浏览器，如 Chrome、Firefox 等。这是 Safari 长期以来限制表单元素上的 CSS 样式功能的传统的一部分，认为交互元素的视觉语言应该与操作系统一致（没有必要尝试找出 IE 失败的原因）。

您唯一的选择是删除它（稍后重新添加），或者将其设置为optnz.disabled = true。很抱歉有坏消息！

【讨论】：