html - 阻止对 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;
}