关于CSS：在Firefox中设置没有选项的选择框的样式


Styling a select box without the options in Firefox

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
   

    <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>

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

Image

由于样式的应用，对比度非常低。它在Chrome(Chrome浏览器)中完美运行，其选项框与以前相同。如何解决此问题？

测试和发现

我做了一些实验，发现当使用rgba(0, 0, 0, 0.15)函数指定Firefox时，它不使用选择下拉菜单的背景色，但是使用rgb(0, 0, 0)，#FFFFFF时却使用了背景色。或black。带有一些测试的代码片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body {
  background: black;
  color: white;
}

select {
  width: 200px;
}

.select1 {
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid #111417;
}

.select2 {
  background-color: rgb(0, 0, 0);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid #111417;
}

.select3 {
  background-color: black;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid #111417;
}

.select4 > option {
    color: rgba(255, 255, 255, 0.85);  
}
.select4 > option:nth-child(2) {
  background: rgba(0, 0, 0, 0.15);
}
.select4 > option:nth-child(3) {
  background: rgba(0, 0, 0);
}
.select4 > option:nth-child(4) {
  background: black;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Background: <wyn>rgba(0, 0, 0, 0.15)</wyn>

<select class="select1">
  <option value="0">Select car</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
</select>


Background: <wyn>rgba(0, 0, 0)</wyn>

<select class="select2">
  <option value="0">Select car</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
</select>


Background: <wyn>black</wyn>

<select class="select3">
  <option value="0">Select car</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
</select>


Backgrounds on <wyn><option></wyn> Tags

<select class="select4">
  <option selected value="default">Default</option>
  <option value="0">background: rgba(0, 0, 0, 1.5)</option>
  <option value="1">background: rgb(0, 0, 0)</option>
  <option value="2">background: black</option>
</select>

在OS X的Firefox 69和70(分别为当前稳定版和夜间版本)中，第一个选择的背景为浅色，带有白色文本颜色(如屏幕截图所示)，第二个和第三个选择的背景为深色。指定的白色文本。

我不确定这是错误还是故意的。半透明的背景可能会对系统下拉列表造成麻烦。

足够有趣的是，Firefox显然还允许直接设置<option>标签的样式。第四个示例对于第二个，第三个和第四个选项具有不同的背景。同样，除了使用rgba的人以外，其他人都可以按预期的方式工作。

在Chrome和Safari中，所有示例的下拉菜单都相同，因为它们不允许在下拉菜单中进行任何样式设置。

解决方法

解决此问题的方法是将选择背景设置为rgb而不是rgba，这样会得到一个深色的白色文本下拉列表，该文本与您的主题相匹配。

如果您确实需要使用rgba作为选择背景，还可以将选项标签的color设置为黑色，以更好地与Firefox中的白色背景形成对比。 Chrome和Safari将完全忽略这些选项。但是，您将要在新的Firefox版本中对其进行测试。在Chrome和Safari中的OS X上，如果使用深色系统主题，则会出现深色主题的下拉列表。如果Firefox遵循此方法，但仍允许您覆盖选项颜色，则将使您在深色背景上显示深色文本。

无论如何，您将要检查解决方案在所有浏览器中的表现，因为对样式选择元素及其下拉菜单的支持因供应商而异。