Thay đổi màu của tùy chọn đã chọn chỉ

Question

Tôi có một bộ chọn ngồi trong ô bảng. Hàng của bảng có màu, do đó, sử dụng CSS, tôi có thể thay đổi màu nền thả xuống thành cùng màu bằng cách sử dụng background-color:inherit; Tuy nhiên, nó thay đổi màu của toàn bộ hộp với tất cả các tùy chọn.

Chỉ có thể thay đổi màu của tùy chọn đã chọn, nếu không với CSS có lẽ với sự trợ giúp của jQuery?

Answer 1

Mọi thứ đều có thể xảy ra với jQuery :) Bạn nên cố gắng này:

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

Và đây là một live demo

Hy vọng rằng sẽ giúp!

Answer 2

Bạn có thể làm điều này với jQuery. Tôi có thể sai (xem bình luận David Thomas'), nhưng thử:

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

Answer 3

Tôi đã có thể thực hiện việc này bằng cách trước tiên thiết lập màu nền của phần tử SELECT thành những gì tôi muốn, dẫn đến tất cả các tùy chọn là màu đó. Sau đó, tôi đã thực hiện tất cả các tùy chọn một bảng màu cụ thể. Cuối cùng, tôi đã chọn tùy chọn đã chọn cùng một lược đồ màu như phần tử SELECT để tùy chọn hiển thị cùng một màu trong danh sách thả xuống.

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