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

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?

Janot

Answer 1

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/

Janot

Answer 2

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

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

Qua

Does anyone have any idea why this works but background: #1aab8e; doesn't? – Formally

Answer 3

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

Add your own style inside the block.

Dwight

Answer 4

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:

• http://jsfiddle.net/DEDX7/
• http://jsfiddle.net/DEDX7/1/

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>

Rayerayfield

@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. – Rayerayfield

Answer 5

Pure CSS would help here:

option:checked

Pretence

Answer 6

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.

Barsky

Not true 100% I'm afraid... modern browsers do allow this. Try it in FireFox ;) it's not cross browser reliable however. – Rayerayfield

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; } – Janot

JavaScript cannot do this with a standard select item. See: jankoatwarpspeed.com/post/2009/07/28/… – Barsky

Oh, I need like this one jsfiddle.net/TxbVt/1 It also not working as you mentioned @Diodeus – Janot