使用CSS隐藏选择框中的选项

Question

我想使用CSS隐藏选择表单选项，但我不知道如何实现。

我有一个像这样的表单，我需要删除“before”选项。

我期望option[value=before]{display:none!important}可以隐藏它，但似乎并不起作用。

option[value=before] {
  display: none!important
}

<select class="_select">
  <option value="">Any</option>
  <option value="1d">Today</option>
  <option value="7d">This Week</option>
  <option value="31d">This month</option>
  <option selected="" value="before">Before date</option>
</select>

- Marco

---

似乎它可以工作... - chazsolo

我猜它可能隐藏在选择器中，但你仍然可以看到它作为所选值。 - Huangism

通过使用 display:none 隐藏选项在 IE 和 Edge 中的支持并不正确。如果您需要在这些浏览器中正常工作，则从 DOM 中 删除 选项是唯一正确（无双关语）的选择。 - CBroe

Answer 1

使用"": [value="before"]

If you want to hide it from select remove selected="" from <option selected="" value="before">Before date</option>

option[value="before"]{
display:none;
}

<select class="_select">
  <option value="">Indifférente</option>
  <option value="1d">Today</option>
  <option value="7d">This Week</option>
  <option value="31d">This month</option>
  <option  value="before">Before date</option>
</select>

- לבני מלכה

---

这在你的浏览器上能运行吗？因为我的火狐和谷歌浏览器都不行。 - Huangism

是的！你是指连 select 也要隐藏吗？ - לבני מלכה

尝试将“class”设置为所需选项，并在CSS中使用“.wanted {display：none}”。 - לבני מלכה

显然，即使添加内联：<option value="before" style="display:none;">Before date</option>也不起作用。 看起来选择选项不支持显示属性:( - Marco

设置一个类也没有帮助。所以我认为这是不可能的。 - Marco