So ändern Sie die Farbe deaktivierter HTML-Steuerelemente in IE8 mithilfe von CSS

Ich versuche, die Farbe der Eingabesteuerelemente zu ändern, wenn sie mithilfe des folgenden CSS deaktiviert werden.

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

Dies funktioniert in den meisten Browsern, jedoch nicht im Internet Explorer. Ich kann alle anderen Stileigenschaften wie Hintergrundfarbe, Rahmenfarbe usw. ändern, nur keine Farbe. Kann jemand das erklären?

Wenn Sie das Attribut deaktiviert verwenden, wird die Farbe des Textes, unabhängig davon, was Sie versuchen, standardmäßig auf Grau gesetzt, mit einem seltsamen weißen Schatten ... Ding ... aber alle anderen Stile funktionieren weiterhin. : - /

Ich hatte das gleiche Problem für <select>Elemente in IE10 und fand eine Lösung, die nur für ausgewählte Elemente funktioniert:

http://jsbin.com/ujapog/7/

Es gibt ein Microsoft-Pseudoelement, mit dem die Textfarbe geändert werden kann:

select[disabled='disabled']::-ms-value {
    color: #000;
}

Die Regel muss eigenständig sein, da sonst andere Browser die gesamte Regel aufgrund eines Syntaxfehlers ignorieren. Weitere Pseudoelemente für andere Internet Explorer finden Sie unter http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx .

Bearbeiten: Ich denke, die Regel sollte wahrscheinlich sein, select[disabled]::-ms-valueaber ich habe keine älteren IE-Versionen vor mir, um es zu versuchen - bearbeiten Sie diesen Absatz erneut oder fügen Sie einen Kommentar hinzu, wenn dies eine Verbesserung darstellt.

Es gibt keine Möglichkeit, Stile für das Attribut disable = "disable" zu überschreiben. Hier ist meine Arbeit, um dieses Problem zu beheben. Beachten Sie, dass ich in meinem Fall nur die Schaltfläche "Senden" auswähle:

if ($.browser.msie) {
    $("input[type='submit'][disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("onclick", "javascript:return false;");
    });
}

Beispiel verfügbar: http://jsfiddle.net/0dr3jyLp/

Ich hatte das gleiche Problem mit dem "deaktivierten" Textbereich, der die Schriftfarbe in Grau änderte. Ich habe eine Problemumgehung durchgeführt, indem ich das Attribut "readonly" anstelle des Attributs "disabled" für den Textbereich mit dem folgenden CSS verwendet habe

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

Es hat für mich wie ein Zauber funktioniert !!, daher empfehle ich, dies zuerst vor jeder anderen Lösung zu versuchen, da es einfach ist, "deaktiviert" durch "schreibgeschützt" zu ersetzen, ohne andere Teile des Codes zu ändern.

Ich weiß, dass es eine Weile her ist, seit dieses Thema erstellt wurde, aber ich habe diese Problemumgehung erstellt, und nun ... Es hat bei mir funktioniert! (Verwenden von IE 9)

Die einzige Konsequenz ist, dass Sie den Wert der Eingabe nicht auswählen können.

Verwenden von Javascript:

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

Ich habe gerade den gesamten Hintergrund hellgrau gemacht. Ich denke, es ist einfacher / schneller zu erkennen, dass die Box deaktiviert ist.

input[disabled]{
  background: #D4D4D4;     
}

Die Art und Weise, wie ich das Problem des "Deaktivierens" eines Steuerelements im IE ohne das hässliche Grau mit einem Eingabesteuerelement vom Typ = Kontrollkästchen gelöst habe, bestand darin, es aktiviert zu lassen und im Ereignis onclick ein wenig Javascript zu verwenden, um Änderungen zu verhindern:

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

Wie von Wayne erwähnt und drei Jahre später immer noch kein Glück mit IE9, aber ...

Sie könnten versuchen, die zu senken opacity Verwendung von CSS zu verringern, da dies die Lesbarkeit verbessert und den gesamten deaktivierten Status unterstützt.

Es ist die Lösung, die ich für dieses Problem gefunden habe:

// wenn IE

inputElement.writeAttribute ("nicht auswählbar", "ein");

//Andere Browser

inputElement.writeAttribute ("disabled", "disabled");

Mit diesem Trick können Sie Ihrem Eingabeelement, das in IE und anderen Browsern in Ihrem nicht bearbeitbaren Eingabefeld funktioniert, ein Stylesheet hinzufügen.

Ich habe die Lösungen von user1733926 und Hamid gemischt und einen effektiven Code für IE8 gefunden. Es wäre schön zu wissen, ob er auch in 9/10 funktioniert (?).

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

Nachdem ich diesen Beitrag gelesen hatte, entschied ich mich, eine Eingabe zu erstellen, die sich ähnlich wie ein deaktiviertes Eingabefeld verhält, aber "schreibgeschützt" war.

Also habe ich es so gemacht, dass es nicht ausgewählt oder mit Registerkarten versehen werden konnte oder einen Mauszeiger hatte, der dem Benutzer die Idee gab, den Wert zu ändern oder auszuwählen.

Getestet auf 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;
}          

Keine Notwendigkeit, CSS zu überschreiben, verwenden Sie einen klassenbasierten Ansatz und das Spielen mit Ereignissen funktioniert perfekt

Sie können eines tun:

<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/

Entfernen Sie das deaktivierte Attribut und verwenden Sie das schreibgeschützte Attribut. Schreiben Sie das erforderliche CSS, um das gewünschte Ergebnis zu erzielen. Dies funktioniert in IE8 und IE9.

zum Beispiel für dunkelgrau,

 input[readonly]{
   color: #333333;     
 }

Bitte überprüfen Sie diesen CSS-Code.

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

oder überprüfen Sie diese URL. http://jsfiddle.net/kheema/uK8cL/13/

Das Problem ist in IE11 gelöst. Wenn das Problem in IE11 weiterhin besteht, überprüfen Sie, ob die Rendering-Engine vom IE verwendet wird.

Bei stackoverflow bin ich auf diesen Code gestoßen, der mir geholfen hat, die CSS-Klasse mit Javascript zu deaktivieren.

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

Der Original-Thread finden Sie unter Anwenden der Klasse mit deaktiviertem k-Status auf Texteingaben - Kendo UI Dachte, ich sollte teilen!

Verwenden Sie diese CSS, funktioniert für IE11:

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
    opacity:0.99 !important;
    background:black;
    text-shadow:inherit;
    background-color:white;
    color:black
}