防止关注 LI 元素将字体颜色变为白色？答案

【问题标题】：preventing focus on LI element from turning font color white?防止关注 LI 元素将字体颜色变为白色？
【发布时间】：2017-06-02 09:04:27
【问题描述】：

我正在尝试设置一些 <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>

【问题讨论】：

你想要黑色背景还是文本颜色？
@SarikaKoli color 属性...
一般情况下，'select'元素中的'option'不能应用样式
@rifa_at_so 在颜色道具之前我做得很好..
如果您对答案感到满意。请接受它:)

标签： html css

【解决方案1】：

这是外部样式表还是嵌入式样式表。包含标记为 !important 的样式的外部样式表优先于标记为 !important 的嵌入样式。但是，未标记 !important 的样式在嵌入样式中优先于外部工作表。只需确保您想要的代码不会被其他代码覆盖。

此外，您可以右键单击元素并在浏览器中单击检查元素以查看是否有任何样式在 Chrome 中被覆盖。

您还可以通过清除浏览历史来检查您的浏览器是否没有缓存您的外部样式表，从而不会显示您对样式所做的更改。

【讨论】：

【解决方案2】：

尝试影响以下选择器：

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

【讨论】：

【解决方案3】：

这是防止它的正确方法。添加-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;
}

【讨论】：