我试图设计一些< LI>元素.我无法理解为什么当他们专注时,他们的颜色属性变白.我试图包括几乎所有我知道的伪选择器并包含颜色:黑色,但无论出于何种原因,在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;
}
options
option 1
option 2
option 3
option 4
option 5