更改焦點時保持選項的背景顏色

在此示例中：https://jsfiddle.net/pfc1qauz/10/當我選擇2並將焦點更改爲C（右側部分中的任何內容）時，背景色2變爲灰色。當它不是焦點時如何保持紅色？更改焦點時保持選項的背景顏色

HTML：

<select class="multiselect-left" size=4> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 
<select class="multiselect-right" size=4> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
</select>

CSS：

option{ 
    background: #F00; 
}

感謝，

來源

2016-04-06 Benjamin

您的內聯代碼和小提琴不匹配請修復。 – Stickers

否：點擊2，然後點擊B，然後點擊外部=> 2，B將變爲灰色。我要他們紅。 – Benjamin

@Pangloss：謝謝。現在沒關係 – Benjamin

這可能是一個特定的瀏覽器樣式的結果。正如你可以看到，如果你使用的開發工具（F12）谷歌Chrome瀏覽器中：

select:-internal-list-box option:checked { 
    background-color: -internal-inactive-list-box-selection; 
    color: -internal-inactive-list-box-selection-text; 
}

即使你是用自己的價值觀來添加此相同的風格，但它仍然無法正常覆蓋它：

select:-internal-list-box option:checked { 
    background-color: red!important; 
    color: #FFF!important; 
}

這是將您看到的樣式應用於任何<select>元素中的選中選項，並且它不能直接覆蓋。

<select>元素在任何一種跨瀏覽器的意義上都非常難以風格化。如果您確實需要處理這些內容，那麼您可能需要use a Javascript-based solution like select作爲使用<div>或其他元素進行造型的外觀的默認<select>。

來源

2016-04-06 15:30:49

好吧： - /所以沒有簡單的方法來做到這一點。 – Benjamin

更改焦點時保持選項的背景顏色

回答

相關問題