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

Question

Я пытаюсь изменить цвет элементов управления вводом, когда они отключены, используя следующую CSS.

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

Это работает в большинстве браузеров, но не в IE. Я могу изменить любые другие свойства стиля, такие как цвет фона, цвет рамки и т. Д., Но не цвет. Кто-нибудь может объяснить это?

Answer 1

К сожалению, если вы используете атрибут disabled, независимо от того, что вы попробуете, IE просто по умолчанию выберет цвет текста Серый со странной белой тенью ... вещь ... но все остальные стили будут работать. : - /

Answer 2

У меня была такая же проблема для <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.

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

Answer 3

Нет способа переопределить стили для атрибута 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/

Answer 4

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

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

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

Answer 5

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

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

Использование Javascript:

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

Answer 6

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

input[disabled]{
  background: #D4D4D4;     
}

Answer 7

То, как я решил проблему «отключения» элемента управления в IE без уродливого серого с помощью элемента управления ввода = type =, оставил его включенным и использовал небольшой JavaScript в событии onclick для предотвращения изменений:

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

Answer 8

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

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

Answer 9

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

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

Исходный поток можно найти по адресу Применение класса с отключенным k-состоянием к текстовым вводам - ​​Kendo UI Мысль я должен поделиться!

Answer 10

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

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

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