CSS定位选择选项与显示:无在Safari和IE中不起作用

Question

>我遇到了一个奇怪的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/

Answer 1

您不能在 Safari 浏览器中使用toggle或display:none属性或隐藏/显示选择选项。它适用于所有其他浏览器，如 铬， 火狐， 等等.这是Safari限制表单元素上的CSS样式功能的悠久而不一致的传统的一部分，认为交互式元素的视觉语言应该与操作系统保持一致（试图为IE的失败找到理由是没有意义的）。

您唯一的选择是将其删除（稍后重新附加），或将其设置为 optnz.disabled = true 。对不起，坏消息！