In Angular js , how to make selected options bold in multiple select

Question

In Angular , Multiple select drop down with option like Select fruits , Apple , Orange , banana like this , if i select banana and apple - how to make this options look bold and change background ?

Answer 1

You can do this with ngClass look the example bellow:

<select ng-model="myModel">
    <option ng-class="{'bg-orange' : myModel == 1}" ng-value="1">Orange</option>
    <option ng-class="{'bg-blue' : myModel == 2}" ng-value="2">Blue</option>
    <option ng-class="{'bg-black' : myModel == 3}" ng-value="3">Black</option>
</select>

And to change the background options you can do a normal css:

.bg-orange{
    background-color: orange;
}
.bg-blue{
    background-color: blue;
}
.bg-black{
    background-color: black;
}

UPDATE

Take a look in this answer: select-dropdown-bold-on-some-options

Answer 2

Usually, you can encapsulate your word with the <strong> element in order to get the text bold. And you can add a css class on the elements in order to change the background. .myClass{background:red}