是否可以在下拉列表中选择css样式选项？

Question

我在Stackoverflow论坛上查了这篇文章。

How to style the <option> with only CSS?

许多人声称这在CSS中无法实现，并且存在许多跨浏览器兼容性问题。

我尝试使用以下代码编写我的css以获取上面附加的图像（用红色圈出）。

.hovercard-container .dropdownfield select option{
  background-color: #BDBEC1;
  border: 1px solid #000;
}

但这在Safari / Chrome / IE中无效。仅适用于Firefox。

是否有人可以在选择选项标签的下拉列表中实现CSS样式？如果没有，是否有其他方法可以让我像上面的图像一样设计风格？

Answer 1

使用相同的样式和效果跨浏览器无法实现这一点。有些浏览器可能会提供更多样式，但这不是解决方案。

我建议使用jQuery插件，例如https://plugins.jquery.com/select2/或https://plugins.jquery.com/chosen/ - 它们将普通的<SELECT>控件转换为风格美。