Thay đổi màu nền của IE khi chưa chọn, tập trung chọn hộp

Question

Tôi muốn thay đổi màu nền màu xanh từ IE khi thả xuống được tập trung, nhưng tôi dường như không thể tìm thấy bất kỳ CSS nào để thực hiện việc này.

<select id=focusSelect><option>Option</option></select> 

JS:

document.getElementById("focusSelect").focus(); 

CSS:

select:focus{ 
    background-color: red; 
} 

http://jsfiddle.net/TafDD/3/

Cụ này là dành cho khi thả xuống không mở cửa. Tạo kiểu tùy chọn không phải là vấn đề.

Tôi cũng không thể tìm thấy bất kỳ câu trả lời dứt khoát nào về việc liệu điều này có thể thực hiện được hay không.

Thiết lập màu nền option cũng không rõ ràng màu xanh.

option { 
    background-color: green; 
} 

http://jsfiddle.net/srycroft/yE2Zg/

Answer 1

Coi trọng này là một câu hỏi trông như già, nhưng để ngăn chặn nền màu xanh trên một tùy chọn được chọn trong một danh sách thả xuống chọn trong IE, sử dụng các yếu tố giả MS -ms-giá trị như đã đề cập bởi WillRice trên. Quan trọng hơn mặc dù bạn cần phải thiết lập một thuộc tính css màu sắc cho văn bản vì điều này sẽ được mặc định là màu trắng.

select::-ms-value { 
    background: none; /* remove blue background on ie10/ie11 when selected*/ 
    color:#000; 
} 

Thông tin thêm here

Answer 2

Tôi đang sử dụng CSS bên dưới và nó đang làm việc trong IE11 mới nhất, Edge, Firefox và Chrome (Tôi đã không thử nghiệm nó với các trình duyệt trước đó). Chỉ cần xóa border-radius và padding nếu bạn không cần chúng. Và cảm ơn willrice vì những đóng góp của anh ấy:

select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    padding: 5px; 
} 

select:focus::-ms-value { 
    background: white; 
    color: black; 
} 

select::-ms-expand { 
    display: none; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    padding: 5px; 
}