how to apply styles to all children of select[multiple]

Samuel D. 0
Viewed 26

I have a select[multiple] attribute with many options

<option value="85" data-select2-id="38">dolcevita</option><option value="22" data-select2-id="4">a</option><option value="6" data-select2-id="5">aa</option><option value="78" data-select2-id="6">aaaa</option>...<option value="28" data-select2-id="7">ad2</option>

the options are random, there can be many options

How can I apply the same css style to all those select[multiple] options?

<select multiple />
  <option>example1</option>
   ...
</select>

looked to apply styles something like this to all my options:

style css

 select[multiple] > option{
    background: red;
    color: black;
    ...
 }
forms css html
1 Answers

All you have to do, it's to disable the browsers default styles

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

then call that class into your select tag

<select class="disable-select">
<option>Hello</option>
</select>

now you can make your styles

KroKing0
Related