如何更改多選下拉框中所選項目的背景顏色？

我想給多選下拉框中的選定項目賦予黃色。默認情況下，它選擇後有灰色背景，我想在HTML, CSS中這樣做。如何更改多選下拉框中所選項目的背景顏色？

任何人都可以幫忙嗎？

2012-11-22 user9371102

我們可以用JS來選擇的DOM。

$('select').change(function() { 
    $('option').css('background', 'none'); 
    $('option:selected').css('backgroundColor', 'red'); 
}).change() 

<select> 
    <option>1111111</option> 
    <option>222222222</option> 
    <option>33333333</option> 
    <option>44444444</option> 
</select>

演示：http://jsfiddle.net/TxbVt/1/

來源

2013-07-07 05:50:53 user9371102

不適用於多選：:( – t1gor

這對我來說也不適用於多選。 –

-3

你不能。 <option>元素不接受CSS樣式。

您可以使用基於JavaScript的替代方案。有許多<select>替代腳本可用。

來源

2012-11-22 15:26:04

不真實100％恐怕......現代瀏覽器確實允許這樣做。嘗試在FireFox中使用;但是它不能跨瀏覽器可靠。 – Pebbl

感謝@Diodeus，你可以用JavaScript來幫助我，如下所示。 ** selected {/ *文本顏色和字體重量，紅色和粗體*/ 顏色：藍色; font-weight：bold; } ** – user9371102

JavaScript無法使用標準選擇項目執行此操作。請參閱：http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx –

下應該工作（用於瀏覽器，讓造型選項標籤），但是默認選擇的造型將在大多數情況下覆蓋。您可能能夠找到一種方法，但是禁用此：

CSS

select option.selected { 
    font-weight: bold; 
    color: red; 
}

的JavaScript

function highlight_options(field){ 
    var i,c; 
    for(i in field.options){ 
    (c=field.options[i]).className=c.selected?'selected':''; 
    } 
}

標記

<select onchange="highlight_options(this)" multiple="multiple"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select>

來源

2012-11-22 15:39:00 Pebbl

感謝@pebbl，系統顏色重寫，http：// jsfiddle。淨/ rZuYz/ – user9371102

@VicKyAmr是的，不幸的是，正如我所說的。由它的外觀你不能刪除這...至少就我發現的。所有這些都是因爲突出顯示不是選項元素的屬性，所以它是頂層的圖層。但是，您仍然可以影響不會被覆蓋的樣式...像邊框和填充。您還可以將樣式和背景圖像應用到未選定的選項，以使其更具吸引力。 – Pebbl

這不適用於FF :( – t1gor

-1

純CSS將有助於在這裏：

option:checked

來源

2016-07-21 03:41:59

<style> 
    .select2-container--default .select2-results__option[aria-selected=true] { 
     background-color: inherit; 
     color: lightgray; 
    } 
</style>

添加你自己的風格的塊中。

來源

2016-11-07 09:58:14 Elnaz

我們可以簡單地使用下面的CSS幫助。

select option:checked{ background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%); }

來源

2016-12-14 13:24:32

如何更改多選下拉框中所選項目的背景顏色？

回答

相關問題