Cách thay đổi màu của các điều khiển html bị tắt trong IE8 bằng cách sử dụng css

Question

Tôi đang cố gắng thay đổi màu của các điều khiển đầu vào khi chúng bị tắt bằng cách sử dụng css sau.

input[disabled='disabled']{ 
    color: #666;  
} 

Điều này hoạt động trong hầu hết các trình duyệt, nhưng không phải IE. Tôi có thể thay đổi bất kỳ thuộc tính phong cách nào khác như màu nền, màu đường viền, vv ... không phải màu. Bất cứ ai có thể giải thích điều này?

Answer 1

Thật không may nếu bạn sử dụng thuộc tính đã tắt, bất kể bạn thử IE sẽ chỉ mặc định màu của văn bản thành Xám, với bóng trắng lạ ... điều ... nhưng tất cả các kiểu khác sẽ vẫn hoạt động. : -/

Answer 2

Cách tôi giải quyết vấn đề "vô hiệu hóa" một điều khiển trong IE với màu xám xấu xí với điều khiển đầu vào của hộp kiểm loại = là để nó được bật và sử dụng javascript nhỏ trong sự kiện onclick ngăn chặn những thay đổi:

onclick='this.checked == true ? this.checked = false : this.checked = true;' 

Answer 3

Như đã đề cập bởi Wayne, và ba năm sau đó vẫn không có may mắn w/IE9, nhưng ...

Bạn có thể thử giảm CSS opacity sử dụng, nó làm cho nó dễ đọc hơn và giúp với toàn bộ trạng thái bị vô hiệu hóa.

Answer 4

Tôi chỉ làm cho toàn bộ nền có màu xám nhạt, tôi nghĩ rằng nó dễ dàng hơn/nhanh chóng truyền đạt rằng hộp bị tắt.

input[disabled]{ 
    background: #D4D4D4;  
} 

Answer 5

Không có cách nào để ghi đè kiểu cho thuộc tính disable = "disable". Đây là công việc của tôi xung quanh để khắc phục vấn đề này, lưu ý Tôi chỉ chọn nộp nút trong trường hợp của tôi:

if ($.browser.msie) { 
    $("input[type='submit'][disabled='disabled']").each(function() { 
     $(this).removeAttr("disabled"); 
     $(this).attr("onclick", "javascript:return false;"); 
    }); 
} 

dụ có sẵn: http://jsfiddle.net/0dr3jyLp/

Answer 6

Tôi biết nó được một lúc kể từ khi tạo ra các chủ đề này, nhưng tôi đã tạo ra cách giải quyết này, và ... Nó làm việc cho tôi! (Sử dụng IE 9)

Hậu quả duy nhất là bạn không thể chọn giá trị của đầu vào.

Sử dụng Javascript:

if (input.addEventListener) 
      input.addEventListener('focus', function(){input.blur()}, true) 
    if (input.attachEvent) 
      input.attachEvent("onfocus", function(){input.blur()}) 

Answer 7

tôi đã cùng một vấn đề cho <select> yếu tố trong IE10 và tìm thấy một giải pháp mà làm việc cho chỉ yếu tố chọn:

http://jsbin.com/ujapog/7/

Có một Microsoft phần tử giả cho phép màu văn bản được sửa đổi:

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

Quy tắc phải nằm trên chính nó, bởi vì nếu không các trình duyệt khác sẽ bỏ qua toàn bộ quy tắc do lỗi cú pháp. Xem http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx đối với các phần tử giả khác của Internet Explorer.

Chỉnh sửa: Tôi nghĩ quy tắc có thể là select[disabled]::-ms-value nhưng tôi không có phiên bản IE cũ hơn trước tôi để thử - chỉnh sửa lại đoạn này hoặc thêm nhận xét nếu đó là cải tiến.

Answer 8

Đây là giải pháp mà tôi tìm thấy cho vấn đề này:

// nếu IE

inputElement.writeAttribute ("unselectable", "on");

// Trình duyệt khác

inputElement.writeAttribute ("disabled", "disabled");

Bằng cách sử dụng thủ thuật này, bạn có thể thêm biểu định kiểu vào yếu tố đầu vào hoạt động trong IE và các trình duyệt khác trên hộp nhập không thể chỉnh sửa của bạn.

Answer 9

Tôi trộn các giải pháp của người dùng1733926 và Hamid và tôi tìm thấy một mã hiệu quả cho IE8, sẽ rất hay để biết nếu nó hoạt động trong tức là 9/10 không (?).

<script type="text/javascript"> 
if ($.browser.msie) { 
    $("*[disabled='disabled']").each(function() { 
     $(this).removeAttr("disabled"); 
     $(this).attr("unselectable", "on"); 
    }); 
} 
</script> 

Answer 10

Tôi đã gặp vấn đề tương tự với việc thay đổi màu phông chữ "đã tắt" của văn bản thành màu xám. Tôi đã làm một workaround bằng cách sử dụng "readonly" thuộc tính thay vì thuộc tính "khuyết tật" để textarea với dưới css

textarea[readonly] { 
border:none; //for optional look 
background-color:#000000; //Desired Background color   
color:#ffffff;// Desired text color 
} 

Nó làm việc cho tôi như một say mê !!, vì vậy tôi đề nghị để thử đầu tiên này trước khi bất kỳ khác giải pháp vì dễ thay thế "bị vô hiệu hóa" bằng "chỉ đọc" mà không thay đổi bất kỳ phần mã nào khác.

Answer 11

Sau khi đọc bài đăng này, tôi quyết định tạo đầu vào hoạt động tương tự như hộp nhập bị tắt nhưng "chỉ đọc".

Vì vậy, tôi đã thực hiện nó để không thể chọn hoặc được gắn thẻ hoặc có con trỏ chuột cho người dùng ý tưởng họ có thể thay đổi hoặc chọn giá trị.

Thử nghiệm trên IE8/9, Mozzila 18, Chrome 29

<input name="UserName" class="accountInputDisabled" id="UserName" type="text" readOnly="readonly" value="" unselectable="on" tabindex="-1" onselectstart="return false;" ondragstart="return false;" onmousedown='return false;'/> 


input.accountInputDisabled { 
    border: 1px solid #BABABA !important; 
    background-color: #E5E5E5 !important;  
    color: #000000; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -moz-user-input: disabled; 
    -ms-user-select: none; 
    cursor:not-allowed; 
} 

input:focus { 
    outline: none; 
}   

Answer 12

Không cần phải Ghi đè các phương pháp tiếp cận dựa trên lớp sử dụng CSS và chơi với các sự kiện hoạt động hoàn hảo

Bạn có thể làm một điều:

<button class="disabled" onmousedown="return checkDisable();"> 

function checkDisable() { 
if ($(this).hasClass('disabled')) { return false; } 
} 

http://navneetnagpal.wordpress.com/2013/09/26/ie-button-text-shadow-issue-in-case-of-disabled/

Answer 13

Xóa bị vô hiệu hóa thuộc tính và sử dụng chỉ đọc thuộc tính. Viết CSS cần thiết để đạt được kết quả cần thiết. Điều này làm việc trong IE8 và IE9.

cho ví dụ, đối với màu xám đậm,

input[readonly]{ 
    color: #333333;  
} 

Answer 14

Vui lòng kiểm tra mã CSS này.

input[type='button']:disabled, button:disabled 
{ 
    color:#933; 
    text-decoration:underline; 
} 

hoặc kiểm tra URL này. http://jsfiddle.net/kheema/uK8cL/13/

Answer 15

Tôi đã xem đoạn mã này ở luồng ngăn xếp giúp tôi tắt lớp css vô hiệu bằng javascript.

$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled"); 

Chủ đề ban đầu có thể được tìm thấy tại Applying k-state-disabled class to text inputs - Kendo UI Tôi nên chia sẻ!

Answer 16

Sử dụng css này, làm việc cho IE11:

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] { 
    opacity:0.99 !important; 
    background:black; 
    text-shadow:inherit; 
    background-color:white; 
    color:black 
}