Я пытаюсь изменить цвет элементов управления вводом, когда они отключены, используя следующий css.
input[disabled='disabled']{
color: #666;
}
Это работает в большинстве браузеров, но не в IE. Я могу изменить любые другие свойства стиля, такие как background-color, border-color и т.д.... просто не цвет. Кто-нибудь может это объяснить?
К сожалению, если вы используете отключенный атрибут, независимо от того, что вы попробуете, IE будет просто по умолчанию использовать цвет текста Gray, с необычной белой тенью... вещь... но все остальные стили будут работать.: -/
У меня была та же проблема для <select> элементов в IE10 и нашел решение, которое работает только для избранных элементов:
Существует псевдоэлемент 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, чтобы перепробовать его - заново отредактируйте этот абзац или добавьте комментарий, если это улучшение.
Невозможно переопределить стили для атрибута 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 "disabled" менял цвет шрифта на серый. Я сделал обходной путь, используя атрибут "readonly" вместо атрибута "disabled" для textarea с ниже css
textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color
color:#ffffff;// Desired text color
}
Это работало для меня как шарм!!, поэтому я предлагаю попробовать это сначала перед любым другим решением, так как легко заменить "отключено" на "readonly", не изменяя никаких других частей кода.
Я знаю, что прошло некоторое время с момента создания этой темы, но я создал это обходное решение, и хорошо... Это сработало для меня! (С использованием 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 без уродливого серого с помощью элемента управления типом type =, должен был оставить его включенным и использовать небольшой javascript в событии onclick, чтобы предотвратить изменения:
onclick='this.checked == true ? this.checked = false : this.checked = true;'
Как упоминалось Уэйном, а три года спустя все еще не удача w/IE9, но...
Вы можете попытаться опустить opacity с помощью CSS, сделать его более читаемым и справиться со всем отключенным состоянием.
Это решение, которое я нашел для этой проблемы:
//если IE
inputElement.writeAttribute( "unselectable", "on");
//Другие браузеры
inputElement.writeAttribute( "отключено", "отключено" );
Используя этот трюк, вы можете добавить таблицу стилей в свой элемент ввода, который работает в IE и других браузерах, в вашем не редактируемом поле ввода.
Я смешал user1733926 и решения Hamid, и я нашел эффективный код для IE8, было бы неплохо узнать, работает ли оно в 9/10 (?).
<script type="text/javascript">
if ($.browser.msie) {
$("*[disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("unselectable", "on");
});
}
</script>
После прочтения этого сообщения я решил создать вход, который действует аналогично отключенному ящику ввода, но был "readonly".
Итак, я сделал это так, чтобы он не мог быть выбран или введен в закладки или иметь указатель мыши, который дал пользователю идею, которую они могут изменить или выбрать значение.
Протестировано на 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/
Удалите атрибут отключен и используйте атрибут readonly. Напишите требуемый 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/
Я наткнулся на эту часть кода в stackoverflow, которая помогла мне снять отключенный класс css с помощью javascript.
$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");
Оригинальную тему можно найти в Применение класса k-state-disabled к текстовым вводам - пользовательский интерфейс Kendo Думаю, я должен поделиться!
Используйте этот 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
}