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

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