僅更改所選選項的顏色

Question

我有一個坐在表格單元格中的選擇器。表格行有一個顏色，所以使用CSS我可以通過使用background-color:inherit;將下拉背景更改爲相同的顏色。但是，它會使用所有選項更改整個框的顏色。

是否有可能只改變所選擇的選項的顏色，如果沒有CSS可能與jQuery的幫助？

Answer 1

一切皆有可能使用jQuery :) 你應該試試這個：

$('.mySelect').change(function() { 
    $(this).find('option').css('background-color', 'transparent'); 
    $(this).find('option:selected').css('background-color', 'red'); 
}).trigger('change'); 

這裏是一個live demo

希望有幫助！

Answer 2

你應該可以用jQuery來做到這一點。我可能是錯的（見大衛托馬斯的評論），但嘗試：

$("option[value='myValue']").css('background-color', 'red'); 

Answer 3

我能夠做到這一點，首先將SELECT元素的背景顏色設置爲我想要的結果，所有選項都是該顏色。然後我將所有選項都做成了特定的配色方案。最後，我使選定的選項與SELECT元素具有相同的顏色方案，因此該選項在下拉列表中顯示相同的顏色。

$.each($('select'), function(i,v) { 

    theElement = $(v); 
    theID = theElement.attr('id'); 

    // Set the SELECT input element to green background with white text 

    theElement.css('background-color', 'green'); 
    theElement.css('color', 'white'); 

    // Set all the options to another color (note transparant will show the green) 

    $('#'+theID).find('option').css('background-color', 'white'); 
    $('#'+theID).find('option').css('color', 'black'); 

    // Finally set the selected option to the same values as the SELECT element 

    $('#'+theID).find('option:selected').css('background-color', 'green'); 
    $('#'+theID).find('option:selected').css('color', 'white'); 
});