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

我能够通过首先将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');
});

Answer 3

你应该能够用jQuery做到这一点。我可能错了（参见David Thomas的评论），但请尝试：

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

仅更改所选选项的颜色

3 个答案: