Як змінити колір вимкнених елементів керування html в IE8 за допомогою css

Я намагаюся змінити колір елементів керування введенням, коли вони вимкнені за допомогою наступного css.

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

Це працює в більшості браузерів, але не в IE. Я можу змінити будь-які інші властивості стилю, такі як колір фону, колір межі тощо ... тільки не колір. Хто-небудь може це пояснити?

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

У мене була така сама проблема для <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, щоб спробувати - перередагуйте цей абзац або додайте коментар, якщо це покращення.

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

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

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

Це спрацювало для мене як шарм !!, тому я пропоную спробувати це спочатку перед будь-яким іншим рішенням, оскільки легко замінити "disabled" на "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;'

Як згадував Уейн, і через три роки все ще не пощастило з IE9, але ...

Ви можете спробувати знизити opacityвикористовуваний CSS, це робить його більш читабельним і допомагає в усьому відключеному стані.

Це рішення, яке я знайшов для цієї проблеми:

// якщо IE

inputElement.writeAttribute ("неможливо вибрати", "увімкнути");

//Інші браузери

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>

Прочитавши цю публікацію, я вирішив створити введення, яке діє подібно до вимкненого поля введення, але було "лише для читання".

Отже, я зробив це так, щоб його не можна було вибрати або вибрати вкладку, або мати курсор миші, який дав користувачеві ідею, що він може змінити або вибрати значення.

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

Проблема вирішена в IE11. Якщо проблема все ще залишається в IE11, перевірте, чи використовується механізм візуалізації, який використовує IE.

Я натрапив на цей шматок коду в stackoverflow, який допоміг мені зняти вимкнення класу css за допомогою javascript.

$("#textboxtest").prop("disabled", false).removeClass("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
}