Styling selected options in a list box (<select>)

Forum Moderators: not2easy

Message Too Old, No Replies

Styling selected options in a list box (<select>)

Fotiman

3:06 pm on Dec 10, 2014 (gmt 0)


<select multiple>
  <option value="1">Lorem ipsum dolor sit amet.</option>
  <option value="2">Lorem ipsum dolor sit amet.</option>
  <option value="3">Lorem ipsum dolor sit amet.</option>
</select>

When selecting elements, my browsers seem to put a blue background on the selected items. Is there a way to specify a different background color of the selected items? I'm assuming this would use some pseudo class, but so far I've been unable to figure out which one.

Fotiman

3:16 pm on Dec 10, 2014 (gmt 0)

Using the Developer Tools in Chrome, I can see that it's getting it's background color style from the user agent stylesheet, using this:


select:-internal-list-box option:checked {
  background-color: -internal-inactive-list-box-selection;
  color: -internal-inactive-list-box-selection-text;
}

I tried overriding this, even using an ID selector on the select element like this:
select#foo option:checked {background-color: red;}
But I can see that style rule crossed out in the dev tools, so I'm not sure why it's overriding that with the user agent default stylesheet.
Stumped.

Fotiman

3:21 pm on Dec 10, 2014 (gmt 0)

Note, adding !important caused the developer tools to show that style as no longer crossed out, but it's still using the UA style instead of the one I defined.

Fotiman

5:41 pm on Dec 10, 2014 (gmt 0)

From what I can tell, this is by design in Chrome and Firefox (which seems to be incorrect to me).
[code.google.com...]