bootstrap multiselect `selected item color

Question

Я создал мульти-выбор по Bootstrap. Так как цвет выбранного элемента по умолчанию синий. У меня есть 5 элементов в списке, я хочу их в 5 разных цветах. Как я могу это сделать, спасибо большое.

<select id="caseSelector" multiple="multiple"></select> 

    $.each(casename, function (key, value) { 
     $('#caseSelector') 
     .append($('<option>', { value: key }) 
     .text(value)); 
    }); 
    $(document).ready(function() { 
       $('#caseSelector').multiselect({ 
        includeSelectAllOption: true, 
        enableFiltering: true, 
        buttonWidth: '140px' 
       }); 
      }); 

Answer 1

Присвойте каждому варианту класс или идентификатор, используя их значение или ключ. Затем обратитесь к классу или идентификатору в вашем css.

я собрал рабочий пример на JSFiddle https://jsfiddle.net/ebzj60o4/1/

<!-- Build your select: --> 
<select id="caseSelector" multiple="multiple"> 
    <option class="blue" value="cheese">Cheese</option> 
    <option class="red" value="tomatoes">Tomatoes</option> 
    <option class="yellow" value="mozarella">Mozzarella</option> 
    <option class="purple" value="mushrooms">Mushrooms</option> 
    <option class="green" value="pepperoni">Pepperoni</option> 
    <option class="orange" value="onions">Onions</option> 
</select> 

Вы также можете использовать CSS Псевдо-классы, чтобы установить цвет для различных состояний. (наведение, активный и т. д.) http://www.w3schools.com/Css/css_pseudo_classes.asp

Надеюсь, что помогите! Приветствия.