Question

我试图用CSS为选择/组合框着色，但我似乎得到了一个可怕的白色＆＃39;闪烁＆＃39;每次我按下按钮下拉列表。

在几分之一秒内，它会显示带有白色背景的列表，然后将其更改为黑色。

有人知道解决这个问题吗？

＆＃13;

<body style="background:#202020;">
<select name="year" style="background:black;color:#505050;">
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
</select>

＆＃13;

它在IE上没有这样做，似乎只在Chrome上（在Windows 10上）。

此处发生的示例：https://youtu.be/ewhumjUOwK8

Answer 1

我无法复制问题（无论是在Chrome还是在Firefox中）。但在造型时你应该更具体。

，select具有默认background-color。所以不是background使用background-color，而是如下所示：

＆＃13;

<body style="background:#202020;">
<select name="year" style="background-color:black;color:#505050;">
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
</select>

＆＃13;

如果您可以使用css（或者您可以为所有选项编写内联样式），则为选项提供与select相同的背景颜色。可能会解决它

＆＃13;

div select[name="year"] {
		background-color:black;
}
div select[name="year"] option {
		background-color:black;
}

＆＃13;

<body style="background:#202020;">
<div>


<select name="year" style="color:#505050;">
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
</select>
</div>

＆＃13;

如果你可以使用CSS，可以更具体地说明select和它的路径，例如，如果select在div中，请使用this（也可以使用name属性来更具体地选择select）。我再说一遍，在CSS中选择select（如果可以使用CSS）时，请尽可能具体。

＆＃13;

div select[name="year"] {
	background-color:black;
}

＆＃13;

<body style="background:#202020;">
<div>


<select name="year" style="color:#505050;">
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
</select>
</div>

＆＃13;

最不推荐的选项是使用!important

＆＃13;

<body style="background:#202020;">
<div>


<select name="year" style="background-color:black!important;color:#505050;">
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
  <option value="1000">1000</option>
</select>
</div>

＆＃13;

使用CSS闪烁选择元素

1 个答案: