Css 在Firefox中设置没有选项的选择框的样式_Css_Firefox

Css 在Firefox中设置没有选项的选择框的样式

css firefox

Css 在Firefox中设置没有选项的选择框的样式,css,firefox,Css,Firefox,我正在尝试将选择框的样式设置为较暗的主题。问题是在Firefox中，选项框中选项的背景和颜色也会根据我的风格而变化，这是我绝对不想要的。代码如下： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { background: black; }

我正在尝试将选择框的样式设置为较暗的主题。问题是在Firefox中，选项框中选项的背景和颜色也会根据我的风格而变化，这是我绝对不想要的。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        body {
            background: black;
        }
        select {
            background-color: rgba(0, 0, 0, 0.15);
            color: rgba(255, 255, 255, 0.85);
            border: 1px solid #111417;
        }
    </style>
</head>
<body>
    <select>
        <option value="0">Select car</option>
        <option value="1">Audi</option>
        <option value="2">BMW</option>
    </select>
</body>
</html>

下面是选项框的屏幕截图：

由于样式的应用，对比度非常低。它在Chrome中工作得非常完美，选项框与以前一样。如何解决此问题？

测试和发现我做了一点实验，发现Firefox在使用rgba0、0、0、0.15函数指定select下拉菜单时不使用背景色，但在使用rgb0、0、0、FFFFFF或黑色时使用背景色。带有一些测试的代码段：

身体{ 背景：黑色；颜色：白色； } 挑选{ 宽度：200px； } .选择1{ 背景色：rgba0,0,0,0.15；颜色：rgba255、255、255、0.85；边框：1px实心111417； } .选择2{ 背景色：rgb0，0，0；颜色：rgba255、255、255、0.85；边框：1px实心111417； } .选择3{ 背景色：黑色；颜色：rgba255、255、255、0.85；边框：1px实心111417； } .选择4>选项{ 颜色：rgba255、255、255、0.85； } .选择4>选项：N-child2{ 背景：rgba0,0,0,0.15； } .选择4>选项：第n-child3{ 背景：rgba0,0,0； } .选择4>选项：第n-child4{ 背景：黑色； } 背景：rgba0,0,0,0.15 选车奥迪宝马背景：rgba0,0,0 选车奥迪宝马背景：黑色选车奥迪宝马选项标签上的背景违约背景：rgba0,0,0,1.5 背景：rgb0，0，0 背景：黑色