How to change the background color of selected elements in the multi-select drop-down list?

Question

I want to give yellow color to the selected items in the multi-select drop-down list. By default it has a gray background after selection, I want to do this in HTML, CSS .

Can anyone help with this?

Answer 1

We can use JS to select the DOM.

 $('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 2

We can just do it with the css below.

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

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.

Answer 4

The following should work (for browsers that allow you to use style parameter tags), however, the default selection style will be overridden in most cases. However, you can find a way to disable it:

• 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 5

Pure CSS will help here:

 option:checked 

Answer 6

You can not. The <option> element does not support CSS styles.

You can use a JavaScript based alternative. There are many scenarios for replacing <select> .