Change Background Color of Selected Items in "Multiselect" Dropdown Box

Change background color of selected items in multiselect dropdown box?

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/

Change color of selected multiselect items

I don't know how to achieve this only in CSS but I know that you can select the selected option using CSS.

My suggestion is to use jQuery to update the attribute of the selected option and then change the CSS rule [selected] to put your preferred background color.

Here is a running example:

$(document).ready(function() {$('select').change(function() {   var selectedOption = $(this).find(':selected');   selectedOption.attr('selected','selected');}).change();});

select{height: 200px; width: 300px;}option {margin: 10px;}
[selected] {    background-color: #0f0;    font-weight:bold;}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script><select multiple="multiple">  <option>One</option>  <option>Two</option>  <option>Three</option>  <option>Four</option>  <option>Five</option></select>

how to set different background for each options in angular-2-dropdown-multiselect plugin

Pass classes in reservationStatusList like this

myOptions: IMultiSelectOption[] = [
        { id: 1, name: 'Option 1', classes: "class-1" },
        { id: 2, name: 'Option 2', classes: "class-2" },
    ];

and then define background color in these classes in global css

.class-1 { background-color: #FF0000; }

Change Color of Selected Option in select multiple

select[multiple]:focus option:checked {  background: red linear-gradient(0deg, red 0%, red 100%);}

<select multiple>  <option value="1">one</option>  <option value="2" selected>two</option>  <option value="3">three</option></select>

How to use pseudo-class for changing background color of selected items in multiple select list

You can use the :checked pseudo-class. (More information about the :checked pseudo-class)

But browsers and operating systems often treat the select/option-elements individually and don't allow some or all of the styling.

For example on Firefox (macOS) the background-color from styling gets ignored. But you can utilize box-shadow to change the color of the background.

But to have fully customized select-elements in your page, that are looking and behaving on all browsers the same, you also can use a replacement-library like Select2.

select option:hover {  background-color: yellow;}select option:checked {  background-color: red; /* NOT working on Firefox (macOS) */  box-shadow: 0 0 0 10px orange inset; /* working on Firefox (macOS) */}

<select multiple>  <option value="1">Lorem</option>  <option value="2">Ipsum</option>  <option value="3">Stack</option>  <option value="4">Overflow</option></select>

---

Related Topics