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

Question

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

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

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

Answer 1

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

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

 input[readonly]{
   color: #333333;     
 }

Answer 2

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

Answer 3

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

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

Проверено на 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 4

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

// if IE

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

// Другие браузеры

inputElement.writeAttribute («отключено», «отключено»);

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

Answer 5

Используйте этот 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
}

Answer 6

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

Answer 7

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

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