CSS3过滤器可以应用于<select>中的选项吗？

Question

我想在打开时模糊选择下拉列表中的选项。我可以模糊选定的选项，但不能模糊其中的选项。 选择选项{     -webkit-filter：blur（5px）;     filter：blur（5px）; } 这是一个测试的codepen： https://codepen.io/santalurr/pen/LLVWBB

Answer 1

您可以在课程名称后使用:hover：

select option:hover {
    -webkit-filter: blur(5px); 
    filter: blur(5px);
    color: blue; /* Just checking if rule and styles are working */
}

Answer 2

您可以在blured选项上添加一个类并执行

<select>
    <option class="blur">tatata</option>
</select>

在你的CSS中做到这一点

select option.blur {
    -webkit-filter: blur(5px); 
    filter: blur(5px);
}

或者只是做

select option:checked {
    -webkit-filter: blur(5px); 
    filter: blur(5px);
}

来源：https://www.w3.org/TR/selectors/#checked

：checked伪类最初适用于具有HTML4选中和检查属性的元素

所以，这个CSS可以工作，虽然在每个浏览器中都不能使用样式。

在点击-1 ...

之前，你也可以看看这里

CSS :selected pseudo class similar to :checked, but for <select> elements

Answer 3

目前，您无法将任何样式应用于HTML <option>。您可以将一些样式应用于<select>本身，并且可以使用此CSS完全删除<select>的默认样式：

select {
  -webkit-appearance none;
  -moz-appearance: none;
  appearance: none;
}

您可能想要使用JQuery插件：https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/
如果你想设置<option>。

的样式