Prevent focusing on an LI element from turning font color white?

Question

I am trying to create some <LI> elements. I cannot understand why, when they are concentrated, their color property turns white. I tried to include almost every pseudo selector that I know, and turned on color: black , but for some reason in Chrome and Firefox I see this behavior.

How can this be prevented?

 .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

Here is the right way to prevent this. Add the -webkit-text-fill-color property.

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

Answer 2

Try working on the following selector:

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

Answer 3

This is an external style sheet or inline. External style sheets containing styles marked as! Important, take precedence over inline styles marked with an icon! Important Styles, but not marked with a character, take precedence in inline styles over external sheets. Just make sure your code is not overwritten by other code.

Alternatively, you can right-click an item and click on the item in the browser to check if any styles are overwritten in Chrome.

You can also check that your browser does not cache your external style sheets without displaying the changes you make in your styles by clearing your browsing history.