未聚焦時如何更改選定的選項顏色？

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元素聚焦時，您的顏色會被灰色覆蓋。