Как изменить цвет отключенных html-элементов управления в IE8 с помощью css

у меня была такая же проблема на <select> элементов IE10 и нашел решение, которое работает только для отдельных элементов:

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

существует псевдо-элемент Microsoft, который позволяет изменять цвет текста:

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

правила должны быть самостоятельно, потому что в противном случае другие браузеры будут игнорировать все правила из-за синтаксической ошибки. Видеть http://msdn.microsoft.com/en-us/library/ie/hh869604 (v=vs.85). aspx для других элементов Internet Explorer только псевдо.

Edit: я думаю, что правило, вероятно, должно быть select[disabled]::-ms-value но у меня нет старых версий IE передо мной, чтобы попробовать это - повторно отредактировать этот абзац или добавить комментарий, если это улучшение.

невозможно переопределить стили для атрибута disable="disable". Вот моя работа, чтобы исправить эту проблему, обратите внимание, что я только выбираю кнопки отправки в моем случае:

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

пример доступен: http://jsfiddle.net/0dr3jyLp/

У меня была такая же проблема с textarea "отключено" изменение цвета шрифта на серый. Я сделал обходной путь, используя атрибут "readonly" вместо атрибута "disabled" для textarea С ниже css

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

это сработало для меня как шарм!!, поэтому я предлагаю попробовать это сначала перед любым другим решением, так как легко заменить "отключено" на "только для чтения" без изменения каких-либо других частей кода.

Я знаю, что прошло некоторое время с момента создания этой темы, но я создал этот обходной путь, и хорошо... Это сработало для меня! ( Используя IE 9 )

единственным следствием является то, что вы не можете выбрать значение входного сигнала.

С Помощью Javascript:

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

Я просто сделал весь фон светло-серого цвета, я думаю, что это более легко/быстро передать, что коробка отключена.

input[disabled]{
  background: #D4D4D4;     
}

способ, которым я решил проблему "отключения" элемента управления в IE без уродливого серого цвета с контролем ввода типа = checkbox, состоял в том, чтобы оставить его включенным и использовать немного javascript в событии onclick для предотвращения изменений:

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

как упоминал Уэйн, и три года спустя все еще не повезло с IE9, но...

вы можете попробовать понизить opacity используя CSS, он делает его более читаемым и помогает со всем отключенным состоянием.

Это решение, которое я нашел для этой проблемы:

//Если IE

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

//других браузерах

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

используя этот трюк, вы можете добавить таблицу стилей в свой элемент ввода, который работает в IE и других браузерах на вашем не редактируемом поле ввода.

я смешал решения user1733926 и Hamid, и я нашел эффективный код для IE8, было бы неплохо узнать, работает ли он и в ie 9/10 (?).

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

после прочтения этого сообщения я решил создать вход, который действует аналогично отключенному окну ввода, но был "только для чтения".

поэтому я сделал так, чтобы он не мог быть выбран или закладки, или иметь курсор мыши, который дал пользователю идею, которую они могут изменить или выбрать значение.

протестировано на 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;
}          

нет необходимости переопределять CSS использовать подход на основе классов и играть с событиями отлично работает

вы можете сделать одну вещь:

<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/

удалить отключен атрибут и использовать только для чтения. Напишите необходимый CSS для достижения требуемого результата. Это работает в IE8 и IE9.

например, для темно-серый,

 input[readonly]{
   color: #333333;     
 }

пожалуйста, проверьте этот код CSS.

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

или проверьте этот URL. http://jsfiddle.net/kheema/uK8cL/13/

проблема решена в IE11. Если проблема по-прежнему сохраняется в IE11, проверьте, используется ли механизм рендеринга IE.

я наткнулся на этот кусок кода в stackoverflow, который помог мне снять отключить класс css с помощью javascript.

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

исходный поток можно найти по адресу применение класса K-state-disabled к текстовым входам-Kendo UI Я подумал, что должен поделиться!

используйте этот css, работает для IE11:

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