Search code examples
cssmulti-selecthtml.dropdownlistfor

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


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?


Solution

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