5

I'm trying to style some <LI> elements. I cannot understand why when they are focused on, their color property turns white. I have tried to include just about every pseudo-selector I know and included color: black, but for whatever reason in both Chrome and Firefox I see this behavior.

How can it be prevented it?

.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>
1252748
  • 14,597
  • 32
  • 109
  • 229

3 Answers3

1

Here is the correct way to prevent it. Add -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;
}
rifa_at_so
  • 326
  • 1
  • 6
  • 18
0

Try impacting the following selector:

.select__multiple .select__option:checked {
   -webkit-text-fill-color: black;
}
Syden
  • 8,425
  • 5
  • 26
  • 45
JH_
  • 406
  • 1
  • 4
  • 15
0

Is this an external stylesheet or an embedded one. External stylesheets that contain styles marked as !important takes precedence over embedded styles marked with !important. Styles however not marked with !important takes precedence in embedded styles over external sheets. Just make sure your wanted code is not overwritten by other code.

Furthermore you can right click on the element and click inspect on the element in the browser to see if any styles are overwritten in Chrome.

You can also check that your browser is not caching your external stylesheets thus not showing changes you make to your styles by clearing your browsing history.

Vikes
  • 33
  • 5