it-swarm.com.de

So ändern Sie die Farbe deaktivierter HTML-Steuerelemente in IE8 mit css

Ich versuche, die Farbe der Eingabesteuerelemente zu ändern, wenn sie mit dem folgenden CSS deaktiviert sind.

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

Dies funktioniert in den meisten Browsern, aber nicht im IE. Ich kann alle anderen Stileigenschaften wie Hintergrundfarbe, Randfarbe usw. ändern. Nur keine Farbe. Kann das jemand erklären?

72
Seth Reno

Wenn Sie das deaktivierte Attribut verwenden, wird die Farbe des Textes bei jedem Versuch mit IE standardmäßig auf Grau gesetzt, mit einem seltsamen weißen Schatten ... Ding ..., aber alle anderen Stile funktionieren weiterhin. : - /

121
Wayne Austin

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 für sich alleine sein, da andernfalls andere Browser die gesamte Regel aufgrund eines Syntaxfehlers ignorieren. Unter http://msdn.Microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx finden Sie Pseudoelemente, die nur für Internet Explorer gelten.

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

14
robocat

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 Senden-Schaltflächen 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/

8
Hamid

Ich hatte das gleiche Problem mit dem Textbereich "deaktiviert", bei dem die Schriftfarbe in Grau geändert wurde Eine Problemumgehung erfolgte, indem das Attribut "readonly" anstelle des Attributs "disabled" im Textbereich " 

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

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

4
Lihkinisak

Ich weiß, es ist schon eine Weile her, seit das Thema erstellt wurde, aber ich habe diese Problemumgehung erstellt, und nun gut ... Es hat für mich funktioniert! (Verwendung von IE 9)

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

Javascript verwenden:

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

Ich habe gerade den ganzen Hintergrund hellgrau gestaltet, ich denke es wird leichter/schneller vermittelt, dass die Box deaktiviert ist.

input[disabled]{
  background: #D4D4D4;     
}
2
viggity

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

Sie könnten versuchen, die Variable opacity mithilfe von CSS zu senken. Dies macht sie lesbarer und hilft mit dem gesamten deaktivierten Zustand.

1
guzart

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

onclick='this.checked == true ? this.checked = false : this.checked = true;'
1
Booji Boy

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

Also habe ich es so gemacht, dass es nicht in der Lage war, ausgewählt zu werden oder einen Tab-Button zu erstellen oder einen Mauszeiger zu haben, der dem Benutzer die Idee gab, dass er den Wert ändern oder auswählen kann.

Getestet mit 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;
}          
0
kaffeemeister

Entfernen Sie disabled attribut und verwenden Sie readonly attribute. Schreiben Sie die erforderliche CSS, um das gewünschte Ergebnis zu erzielen. Dies funktioniert in IE8 und IE9.

beispielsweise für dunkelgrau,

 input[readonly]{
   color: #333333;     
 }
0
Sahana

Ich mischte die Lösungen von User1733926 und Hamid und ich fand einen effektiven Code für IE8. Es wäre schön zu wissen, ob es auch in 9/10 funktioniert (?).

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

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/

0
Kheema Pandey

Es ist nicht nötig, die CSS-Klassenklassen zu überschreiben und das Spiel mit Ereignissen funktioniert perfekt

Sie können eine Sache 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/

0
Navneet Nagpal

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 Stylesheet hinzufügen, das in IE und anderen Browsern in Ihrem nicht bearbeitbaren Eingabefeld funktioniert.

0
Homa

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

0
Aman Srivastava