Question

我正在尝试设置一些<LI>个元素。我无法理解为什么当他们专注时，他们的color属性变成了白色。我试图将我知道的每个伪选择器都包含在color: black中，但无论出于何种原因，Chrome和Firefox都会出现这种情况。

如何防止它？

.select__label {
  display: block;
}

.select__multiple {
  border: 0;
  display: block;
  outline: 0;
  border-collapse: collapse;
}
.select__multiple option {
  border-width: 1px 0;
  border-style: solid;
  border-color: deepSkyBlue;
}
.select__multiple .select__option {
  border: 1px solid lightGrey;
  color: black;
  padding: 12px 10px;
  width: 150px;
}
.select__multiple .select__option:hover, .select__multiple .select__option:active, .select__multiple .select__option:visited, .select__multiple .select__option:focus, .select__multiple .select__option:checked, .select__multiple .select__option:selected {
  color: black !important;
}
.select__multiple .select__option:checked {
  color: black;
  border-style: solid;
  border-color: deepSkyBlue;
  background: #dceff7 linear-gradient(0deg, #dceff7 0%, #dceff7 100%);
}
.select__multiple .select__option:checked + :checked {
  border-top-width: 0;
  border-top: 1px solid transparent;
}

  <span class="select__label">options</span>
  <select name="genders" class="select__multiple" multiple="multiple">
    <option class="select__option" checked>option 1</option>
    <option class="select__option">option 2</option>
    <option class="select__option">option 3</option>
    <option class="select__option">option 4</option>
    <option class="select__option">option 5</option>
  </select>

Answer 1

这是防止它的正确方法。添加-webkit-text-fill-color属性。

.select__multiple .select__option:checked {
  color:black;
  border-style: solid;
  border-color: deepSkyBlue;
  background: #dceff7 linear-gradient(0deg, #dceff7 0%, #dceff7 100%);
 -webkit-text-fill-color: black;
}

Answer 2

尝试影响以下选择器：

.select__multiple .select__option:checked {
   -webkit-text-fill-color: black;
}

Answer 3

这是外部样式表还是嵌入式样式表。包含标记为！important的样式的外部样式表优先于标记为！important的嵌入样式。然而，没有标记为！important的样式优先于嵌入样式而非外部工作表。只需确保其他代码不会覆盖您想要的代码。

此外，您可以右键单击该元素，然后单击浏览器中的元素上的检查，以查看是否在Chrome中覆盖了任何样式。

您还可以检查您的浏览器是否未缓存外部样式表，因此无法通过清除浏览历史记录来显示您对样式所做的更改。

防止关注LI元素使字体颜色变白？

如何防止它？

3 个答案: