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属性或隐藏/显示选择选项。它适用于所有其他浏览器，如Chrome，Firefox等。这是漫长且不一致的传统的一部分，Safari限制表单元素上的CSS样式功能，相信交互元素的可视语言应该与操作系统保持一致（没有尝试点为IE的失败找到理由。

您唯一的选择是将其删除（并在以后重新添加），或将其设置为optnz.disabled = true。抱歉，这是个坏消息！

CSS目标选择选项，显示：无法在Safari和IE中使用

1 个答案: