如何将 styles 应用于 select 的所有子项[多个]

Question

我有一个带有很多选项的select[multiple]属性

<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>

选项是随机的，可以有很多选项

如何将相同的 css 样式应用于所有这些 select[multiple] 选项？

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

期待将 styles 应用于我的所有选项：

style css

 select[multiple] > option{
    background: red;
    color: black;
    ...
 }

Answer 1

您所要做的就是禁用浏览器默认 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 */
}

然后将 class 称为 select 标签

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

现在你可以制作你的 styles