20

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

Mere Development
  • 2,439
  • 5
  • 32
  • 63
  • Similar: http://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-for-select-elements – BoltClock Feb 16 '12 at 11:15

4 Answers4

56

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

Marcel Tschopp
  • 576
  • 5
  • 3
  • 3
    I reckon this should be the selected answer. – dokgu Sep 30 '16 at 19:35
  • So apparently you can only replace the default highlight color with an image and not a different color? Makes sense... – BoltClock Apr 19 '17 at 04:42
  • 1
    This does work on Microsoft Edge. "IE/Edge" usually refers to Edge mode on IE11, which is the same as IE11. If you want to talk about the new browser, call it "Microsoft Edge" or "Edge" but don't call it IE. It is not IE. – BoltClock Apr 19 '17 at 04:43
3

::selection doesn't apply to selected options; it applies to highlighted text. Either you're misinterpreting their suggestions, or what they said is flat-out wrong.

According to this answer, you're supposed to be able to use option:checked for styling the selected items:

#dropdowns option:checked {
    background: red;
}

But I haven't been able to get it to work for <select> or <select multiple> elements in this test fiddle.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Hi, thanks you edited before I had a chance to tell you it didn't work :) - Wierd! Thanks for the fiddle. I see that [selected] sort of works if you see you fiddle modified here: http://jsfiddle.net/vzDvK/1/ - Odd results though, can you take a look please? – Mere Development Feb 16 '12 at 11:08
  • 2
    @Mere Development: You can use `[selected]` instead of `:checked`, but it only applies to whichever options are selected at the time the page was loaded (as it's an attribute selector). If you change the selection, the styles won't update. – BoltClock Feb 16 '12 at 11:11
  • Ok thanks for sticking with this! so we're saying that :checked just doesn't work for options for some reason (referencing your original jsfiddle)? Do you reckon it's a bug? – Mere Development Feb 16 '12 at 11:35
  • Ok well I guess the original question is anwered. Yes the background can be coloured with [selected]. Shame it sucks tho. Thanks for your help @BoltClock – Mere Development Feb 16 '12 at 14:40
  • 2
    @Mere Development: I suggest changing the accepted answer to Marcel Tschopp's. – BoltClock Apr 19 '17 at 04:44
1

I found this because I was having the same problem, I did find an odd solution that seems to work atleast with chrome and maybe others. The solution was to use an attribute selector. This seemed to work with chrome, I tested it in the js fiddle. A side note that the box did not immediately change color to background red but once I selected another option I could clearly see that it had indeed turned red. You can check it out in the jsfiddle listed above.

http://jsfiddle.net/vzDvK/1/

#dropdowns option[selected] {
    background: red;
}
Chris Hinshaw
  • 6,967
  • 2
  • 39
  • 65
0

The right CSS Selector for you would be :checked

::selection is only for text that has been highlighted:

mas-designs
  • 7,498
  • 1
  • 31
  • 56