我正在尝试设计一些 <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>
最佳答案
这是防止它的正确方法。添加 -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;
}
关于html - 阻止对 LI 元素的关注将字体颜色变为白色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41711737/