使用CSS设置选择框的样式

Question

我有一个选择框：

<select name="Topic" autofocus>
<option>Science</option>
<option>Java Programming</option>
<option>Advance Web Programming</option>
</select>

使用以下CSS：

select{
    height: 30px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 2px;
    font-size: 16px;
    color: #000000;
    font-weight: 400;
    padding: 4px;
}

这是我的输出：


CSS似乎只影响选择框之外，但不影响内部（下拉列表），如何修改它以便内部也会被修改？

Answer 1

在某些情况下你可以，但肯定不会是crossbrowser。该元素由OS呈现，而不是HTML。它无法通过CSS设置样式。有替换插件看起来像SELECT，但实际上是由可以设置样式的常规HTML元素组成。

From MSDN

  

除背景颜色和颜色外，将忽略通过选项元素的样式对象应用的样式设置。此外，直接应用于各个选项的样式设置将覆盖应用于整个包含的select元素的样式设置。

因此它适用于某些浏览器和版本，但Chrome不会。我现在无法找到规格。

JS解决方案

大多数插件将<select>元素转换为<ol>和<option>元素转换为<li>，以便您可以使用CSS设置样式。你可以写自己的，但我确信那里有很好的东西。

两个选项

• Chosen - github上的7k +观察者
• Select2 - 受选择的启发

Answer 2

原生浏览器的选择框的样式设置太受限制。因此，我们的想法是隐藏原生选择框并使用其他一些html元素模拟其行为。

试试像selectBoxIt这样的lib这样做。