android - 移动:使用 CSS 隐藏选择框中的特定选项

Question

@media (max-width: 767px){
    #nav-container option:nth-child(3), 
    option:nth-child(9), 
    option:nth-child(13) 
    {display: none !important;}
                               }

以上是我的 CSS 代码，试图隐藏 3 个特定选项，使其不在移动 View 中显示。但是，只有 Chrome 会显示我想要使用手机显示的内容。 Firefox 和三星的默认浏览器不会隐藏这 3 个特定选项。对此有什么想法吗？

Answer 1

虽然你的造型确实有问题，但问题不在于你的造型。 Android 的“Spinners”——这是 Android 的原生版本的下拉菜单——无法使用 CSS 设置样式。相反，由每个浏览器来解析您的 CSS 样式，并将相同的信息传递给 Android Spinner，指示它隐藏某些元素。

参见 http://jsbin.com/tenute ，其中我做了两件事:

1. 移除了@media 查询的额外复杂性:这将使我们能够从场景中移除尽可能多的变量
2. 将每个选项都设为薄荷绿色

现在在 Chrome 和 Firefox 中重新测试。请注意——和以前一样——Chrome 隐藏了这些选项，但 Firefox 没有。但是，请注意，两个 Spinner 仍然保持白色，即使样式指示它们为绿色也是如此。 (还有非常基本的样式，我可能会补充)。这是因为，在这种情况下，Chrome 和 Firefox 都没有对其微调器进行编程以反射(reflect)来自 CSS 的背景颜色。