如何在選擇標記中設置選定選項的顏色

我試圖在選擇標記中設置大小爲5的選定選項的顏色，以便充當列表框。如何在選擇標記中設置選定選項的顏色

當選擇標籤作爲下拉菜單時，我可以使用它，但是當我將它作爲列表框時，選中選項始終是灰色的，因爲我沒有將它聚焦。

下面是發生了什麼的代碼示例。第一個選擇標籤正常工作，但只要應用尺寸屬性，所選選項的顏色就會變爲灰色。

select { 
 
    margin: 40px; 
 
    background: yellow; 
 
    color: #000; 
 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); 
 
} 
 
option:not(:checked) { 
 
    background-color: #FFF; 
 
}

<select> 
 
    <option val="">Select Option</option> 
 
    <option val="1">Option 1</option> 
 
    <option val="2" selected>Option 2</option> 
 
    <option val="3">Option 3</option> 
 
    <option val="4">Option 4</option> 
 
</select> 
 
<br/> 
 
<select size="5" multiselect> 
 
    <option val="">Select Option</option> 
 
    <option val="1">Option 1</option> 
 
    <option val="2" selected>Option 2</option> 
 
    <option val="3">Option 3</option> 
 
    <option val="4">Option 4</option> 
 
</select>

在不同瀏覽器上的JS提琴檢查後，它似乎是，這是獲得設置瀏覽器的風格。

以下是來自Chrome，Firefox和Internet Explorer的圖像。 Chrome和Firefox似乎都設置了自己的價值，但Internet Explorer不會。

來源

2016-07-27 polydegmon

要做到這一點，你必須設置在CSS的option的background財產。

select, 
 
select option:active, 
 
select option:checked{ 
 
     margin:40px; 
 
     background: yellow; 
 
     color:#000; 
 
     text-shadow:0 1px 0 rgba(0,0,0,0.4); 
 
    } 
 
    option:not(:checked) { 
 
     background-color: #FFF; 
 
    }

<select> 
 
     <option val="">Select Option</option> 
 
     <option val="1">Option 1</option> 
 
     <option val="2" selected>Option 2</option> 
 
     <option val="3">Option 3</option> 
 
     <option val="4">Option 4</option> 
 
    </select> 
 
    <br/> 
 
    <select size="5" multiselect> 
 
     <option val="">Select Option</option> 
 
     <option val="1">Option 1</option> 
 
     <option val="2" selected>Option 2</option> 
 
     <option val="3">Option 3</option> 
 
     <option onfocus="this.style.background='red'" val="4">Option 4</option> 
 
    </select>

來源

2016-07-27 17:44:49 EddNewGate

有沒有什麼辦法讓灰色文本出現灰色以外的顏色？ – polydegmon

@polydegmon我看到文本是黑色的，而不是灰色的。你想改變其他顏色？ – EddNewGate

我的道歉EddNewGate，我的意思是文字的背景仍然是灰色的，我希望它是黃色的，如果可能的話 – polydegmon

您可以嘗試在多的情況下添加背景漸變選擇如下圖所示。您需要添加屬性才能在跨瀏覽器中完成此項工作。

select[multiselect] option:checked { 
    background: -moz-linear-gradient(left, yellow 0%, yellow 100%); 
}

來源

2016-07-27 17:46:31

如何在選擇標記中設置選定選項的顏色

回答

相關問題