Change background color of selected items in "multiselect" dropdown box?

Question

I want to give the yellow color to the selected items in multiselect dropdown box. By default, it has gray background after selecting, How to do this in HTML, CSS.

This question is about multiselect but for single select refer (Related but not duplicate of either): How to apply background-color to a selected option?

score 7 · Answer 1 · edited Sep 08 '20 at 19:52

7

We can simply do with the help of the below CSS:

select option:checked{
  background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%);
}

edited Sep 08 '20 at 19:52

TylerH

20,799
66
75
101

answered Dec 14 '16 at 13:24

Vikash Gupta

101
1
8

2

Does anyone have any idea why this works but background: #1aab8e; doesn't? – John Mellor Feb 24 '20 at 04:58

score 2 · Accepted Answer · answered Jul 07 '13 at 05:50

We can use JS to select the DOMs.

$('select').change(function() {
    $('option').css('background', 'none');
    $('option:selected').css('backgroundColor', 'red');
}).change()

<select>
    <option>1111111</option>
    <option>222222222</option>
    <option>33333333</option>
    <option>44444444</option>
</select>

Demo : http://jsfiddle.net/TxbVt/1/

score 2 · Answer 3 · answered Nov 07 '16 at 09:58

2

<style>
     .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: inherit;
        color: lightgray;
    }
</style>

Add your own style inside the block.

answered Nov 07 '16 at 09:58

Elnaz

2,854
3
29
41

Pebbl · Answer 4 · 2012-11-22T15:50:42.413

0

The following should work (for browsers that allow styling option tags), however the default select styling will override in most cases. You may be able to find a way to disable this however:

css

select option.selected {
  font-weight: bold;
  color: red;
}

javascript

function highlight_options(field){
  var i,c;
  for(i in field.options){
    (c=field.options[i]).className=c.selected?'selected':'';
  }
}

markup

<select onchange="highlight_options(this)" multiple="multiple">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

edited Nov 22 '12 at 15:50

answered Nov 22 '12 at 15:39

Pebbl

34,937
6
62
64

@VicKyAmr Yeah unfortunately as I said. by the looks of it you can't remove this... at least as far as I've found. All because the highlight isn't a property of the option element, it is a layer on top. However, you can still affect styles that aren't overridden though... like border and padding. And you can apply styles and background images to the non-selected options as well to make them more appealing. – Pebbl Nov 22 '12 at 15:49

score -2 · Answer 5 · answered Jul 21 '16 at 03:41

-2

Pure CSS would help here:

option:checked

answered Jul 21 '16 at 03:41

Anton Mitsev

602
9
15

score -3 · Answer 6 · edited Sep 08 '20 at 19:59

-3

You can't. The <option> element does not accept CSS styling.

You can used a JavaScript-based alternative. There are many <select> replacement scripts available.

edited Sep 08 '20 at 19:59

TylerH

20,799
66
75
101

answered Nov 22 '12 at 15:26

Diodeus - James MacFarlane

112,730
33
157
176

1

Not true 100% I'm afraid... modern browsers do allow this. Try it in FireFox ;) it's not cross browser reliable however. – Pebbl Nov 22 '12 at 15:28
Thanks @Diodeus, Can you hel me with the Javascript to style as below. **selected { /* Text colour and font weight, red and bold */ color:blue; font-weight:bold; }** – user9371102 Nov 22 '12 at 15:29
JavaScript cannot do this with a standard select item. See: http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx – Diodeus - James MacFarlane Nov 22 '12 at 15:31
Oh, I need like this one http://jsfiddle.net/TxbVt/1/ It also not working as you mentioned @Diodeus – user9371102 Nov 22 '12 at 15:36

Change background color of selected items in "multiselect" dropdown box?

6 Answers6

Linked