Styling tàn tật <select> (hộp thả xuống) trong HTML

Question

Một trong những khách hàng của chúng tôi có một thời gian khó đọc văn bản màu xám trong điều khiển vô hiệu hóa trong ứng dụng dựa trên web của chúng tôi:

Chúng tôi muốn thay đổi phong cách với nền xám nhạt và văn bản màu đen. Thật không may, hầu hết các trình duyệt (bao gồm cả IE, đó là những gì khách hàng đang sử dụng) bỏ qua thuộc tính CSS color: ... trên các điều khiển bị vô hiệu hóa, vì vậy chúng tôi không thể thay đổi màu nền trước.

Đối với hộp văn bản (input type="text"), điều này có thể dễ dàng được giải quyết bằng cách sử dụng readonly thay vì thuộc tính disabled. Rất tiếc, đây không phải là tùy chọn cho các menu thả xuống (select) hoặc hộp kiểm (input type="checkbox").

Có cách giải quyết dễ dàng cho điều đó không? Ưu tiên một nơi mà kiểm soát không cần phải được thay thế bằng một loại điều khiển khác? (... vì các điều khiển của chúng tôi được hiển thị bởi ASP.NET)

PS: Sử dụng bộ chọn [disabled] trong CSS không tạo sự khác biệt.

Answer 1

Trong Internet Explorer 9, hỗ trợ sẽ được bổ sung cho :disabled bộ chọn giả (ref). Tôi không biết liệu điều đó có tôn trọng tài sản "màu" hay không, nhưng dường như nó có khả năng xảy ra.

Trong các phiên bản cũ hơn của IE, bạn có thể điều chỉnh màu nền (nhưng không phải màu). Như vậy:

<style type="text/css"> 
     select[disabled] { background-color: blue; } 
    </style> 

đó làm việc trong IE 7 và IE 8. Bạn vẫn không thể thay đổi màu nền trước, nhưng bạn có thể thay đổi màu nền để tương phản mạnh mẽ hơn với màu xám mà IE gán cho nó khi nó bị disable.

Answer 2

Xin lỗi vì tiếng anh của tôi ...

Đó không phải là có thể sử dụng css chỉ, IE không cho phép tính thay đổi của một chọn thẻ khuyết tật

Answer 3

Đối với những người vẫn đang tìm kiếm điều này.

Không làm việc:

select[disabled] { background-color: blue; } 

làm việc:

select option [disabled] { background-color: blue; } will do 

Answer 4

này làm việc cho tôi

select[disabled='disabled']::-ms-value { 
    color: red; 
    } 

Answer 5

này đã làm việc cho tôi trong webkit và Firefox

select:disabled{ 
    opacity: 0.6; 
}