CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
trifesk
trifesk

Reputation: 55

Change the color of the selection in CSS

I have a page with such a component: (the screenshot shows the view and the code of this component):

enter image description here

I don't know what this component is. I need to change the color of selected items to red (select option with parametr "selected"). Item without "selected" it may still be gray.

<select name="user_ids[]" id="user_ids" class="form-control edited" style="background-image: none !important;" required="" multiple="">
                <option value="1" data-role="root" selected="">Admin</option>
                <option value="2" data-role="root">User</option>
                <option value="6" data-role="admin" selected="">Andrzej</option>
            </select>

How can I make it?

Upvotes: 0

Views: 99

Answers (1)

Caner Sevince
Caner Sevince

Reputation: 39

you can use :

select[multiple]:focus option:checked {
    background: red linear-gradient(0deg, red 0%, red 100%);
}
<select name="user_ids[]" id="user_ids" class="form-control edited" style="background-image: none !important;" required="" multiple="">
    <option value="1" data-role="root" selected="">Admin</option>
    <option value="2" data-role="root">User</option>
    <option value="6" data-role="admin" selected="">Andrzej</option>
</select>

or

option[selected] {
    background: red;
}
<select name="user_ids[]" id="user_ids" class="form-control edited" style="background-image: none !important;" required="" multiple="">
    <option value="1" data-role="root" selected="">Admin</option>
    <option value="2" data-role="root">User</option>
    <option value="6" data-role="admin" selected="">Andrzej</option>
</select>

Upvotes: 1

Related Questions