仅更改所选选项的颜色

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'); 
});