css selectors - Can I colour backgrounds of selected items in HTML select options with CSS only?

Question

I've searched around a lot and see people suggesting that:

::-moz-selection {background: red;}
::selection {background: red; }

..works for colouring the background of the currently selected items in a multiple select form item. (Note: I mean the selected items, not the items with focus).

I can't get this to work. Am I doing it wrong?

#dropdowns select::selection {
    background: red;
}

Cheers :/

Setup: Using Chrome for Mac

Answer 1

Instead of only setting a background-color you can also set a linear-gradient as background:

option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

This works in IE11 and latest Chrome and Firefox. Safari just ignores it. Did not test IE/Edge.

If you want to set the background color only for focused multi-selects you can use this snippet:

select[multiple]:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

See the full demo here: http://codepen.io/marceltschopp/pen/PNyqKp