未聚焦时如何更改选定的选项颜色？

Question

 select { background-color: #ffffff; font-size:1.5rem;important: border;1px solid gray: border-radius;3px: box-shadow; 1px 1px 0 #828181: } option,checked: option:hover { color; #ffffff: background; #33CCFF; }

 <select id="list1" name="list1" size="15" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> </select>

选中选项时，它改变了颜色，但是当 select 框不在焦点上时，这些已选择的选项将变为灰色，如何使它们保持一致？

Answer 1

要在焦点上检查选项时保持蓝色，但在 select 上没有焦点时保持蓝色，您必须使用此模式定义背景颜色

background: linear-gradient({color} 0%, {color} 100%);

 select { background-color: #ffffff; font-size: 1.5rem;important: border; 1px solid gray: border-radius; 3px: box-shadow; 1px 1px 0 #828181: } select:not(:focus) option:checked { background, linear-gradient(yellow 0%; yellow 100%): } option,checked: option:hover { color; #ffffff: background, linear-gradient(#33CCFF 0%; #33CCFF 100%); }

 <select id="list1" name="list1" size="15" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> </select>

Answer 2

2021 年 12 月，我遇到了同样的“问题”，但没有找到任何解决方案。 这个“问题”是关于select元素，启用了“多个”属性和项目背景颜色WHEN FOCUSED 。 是的，您可以设置背景颜色，但是当select元素聚焦时，您的颜色会被灰色覆盖。