移动设备：使用 CSS 在 select 框中隐藏特定选项

Question

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

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

Answer 1

你有 link 来查看吗？

您的媒体查询看起来没问题 - 它可能是您的选择器。

您可以通过使用相同的 class 选择器更改另一个 css 属性来测试它，我的目标是设置新的背景颜色并查看它是否已应用。如果不是，也许尝试不同的选择器。根据您的标记，nth-of-type 可能有效。

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     background: green;

  }

如果您要隐藏的所有元素都包含在#nav-container 中，您需要为以下每个元素使用父 ID：

@media (max-width: 767px) {

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     display: none;

  }

}

或者，您可以采用移动设备优先的方法：

  /* mobile */

 #nav-container option:nth-child(3), 
 #nav-container option:nth-child(9), 
 #nav-container option:nth-child(13) {

   display: none;

}

 /* desktop */

 @media (min-width: 767px) {

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     display: block; /* or default display property */

  }

}

Answer 2

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

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

删除了@media 查询的额外复杂性：这将允许我们从场景中删除尽可能多的变量
使每个选项都变成薄荷绿色

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

的背景颜色

移动设备：使用 CSS 在 select 框中隐藏特定选项

Mobile: Hiding particular options in select box using CSS

html

css

mobile

android

drop-down-menu