Как изменить цвет отключенных элементов управления html в IE8 с помощью css
Я пытаюсь изменить цвет входных элементов управления, когда они отключены, используя следующий css.
input[disabled='disabled']{
color: #666;
}
это работает в большинстве браузеров, но не IE. Я могу изменить любые другие свойства стиля, такие как цвет фона, цвет границы и т. д... только не цвет. Кто-нибудь может это объяснить?
17 ответов
к сожалению, если вы используете атрибут disabled, независимо от того, что вы пытаетесь IE будет просто по умолчанию цвет текста серый, со странной белой тенью...вещь... но все остальные стили будут работать. :-/
у меня была такая же проблема на <select>
элементов в IE10 и нашел решение, которое работает только для отдельных элементов:
существует псевдо-элемент Microsoft, который позволяет изменять цвет текста:
select[disabled='disabled']::-ms-value {
color: #000;
}
правила должны быть самостоятельно, потому что в противном случае другие браузеры будут игнорировать все правила из-за синтаксической ошибки. Видеть http://msdn.microsoft.com/en-us/library/ie/hh869604 (v=против 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("неизбираемый", "on");
//других браузерах
inputElement.writeAttribute ("отключено","отключено");
используя этот трюк, вы можете добавить таблицу стилей к элементу ввода, который работает в 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;
}
Не нужно overrride класс использовать 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
}