how to change background color of selected items i

Question

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

Can any one help in this?

Answer 1

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>

Answer 2

Pure CSS would help here:

option:checked

Answer 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.

Answer 4

We can simply do with the help of the below css.

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

Answer 5

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/

Answer 6

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

Add your own style inside the block.