How to change color of disabled html controls in IE8 using css

Asked
Viewd77193

74

I'm trying to change the color of input controls when they are disabled using the following css.

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

This works in most browsers, but not IE. I'm able to change any of the other style properties such as background-color, border-color, etc... just not color. Can anyone explain this?

17 ответов

123

Unfortunately if you use the disabled attribute, no matter what you try IE will just default the color of the text to Grey, with a weird white shadow...thing... yet all other styles will still work. :-/

  • I almost voted this answer down, but I stopped myself. I was going to do it because I hated the answer; not because the answer was wrong. Voting up :p

    Stephen Sorensen02 октября 2009, 16:39
  • Yea, but why? Is it using some non-standard filter style behind the scenes or something?

    Seth Reno11 сентября 2009, 14:55
0

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

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

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

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

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

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

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

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

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

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

// если IE

inputElement.writeAttribute ("не выбирается", "включен");

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

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

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

0

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

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

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

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

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

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

2

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

 input[disabled]{
  background: #D4D4D4;     
}
 
0

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

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

  input[readonly]{
   color: #333333;     
 }
 
16

У меня была такая же проблема для <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, чтобы попробовать это - отредактируйте этот абзац повторно или добавьте комментарий, если это улучшение.

8

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

1

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

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

0

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

0

Проверьте этот код CSS.

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

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

0

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

-2

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

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

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