it-swarm.com.de

Formatierung deaktiviert <Auswahl> (Dropdown-Felder) in HTML

Einer unserer Kunden hat Schwierigkeiten, den grauen Text in deaktivierten Steuerelementen in unserer webbasierten Anwendung zu lesen:

IE9 example

Wir möchten den Stil in einen hellgrauen Hintergrund und einen schwarzen Text ändern. Leider ignorieren die meisten Browser (einschließlich IE, was der Kunde verwendet) das CSS-Attribut color: ... bei deaktivierten Steuerelementen. Daher können wir die Vordergrundfarbe nicht ändern.

Bei Textfeldern (input type="text") kann dies leicht behoben werden, indem die Variable readonly anstelle des Attributs disabled verwendet wird. Leider ist dies keine Option für Dropdowns (select) oder Kontrollkästchen (input type="checkbox").

Gibt es eine einfache Problemumgehung dafür? Vorzugsweise, wenn die Steuerung nicht durch eine andere Art von Steuerung ersetzt werden muss? (... da unsere Steuerelemente von ASP.NET gerendert werden)

PS: Die Verwendung des [disabled]-Selektors in CSS macht keinen Unterschied.

19
Heinzi

In Internet Explorer 9 wird der Pseudo-Selektor :disabled ( ref ) unterstützt. Ich weiß nicht, ob dies die Eigenschaft "color" auszeichnet, aber es scheint wahrscheinlich.

In älteren IE-Versionen können Sie die Hintergrundfarbe (aber nicht die Farbe) anpassen. Somit:

    <style type="text/css">
        select[disabled] { background-color: blue; }
    </style>

Das funktioniert in IE 7 und IE 8. Sie können die Vordergrundfarbe immer noch nicht ändern, aber Sie können die Hintergrundfarbe ändern, um einen stärkeren Kontrast zu dem Grau zu bilden, das IE ihr zuordnet es ist deaktiviert.

28
Will Martin

Dies funktionierte für mich in Webkit und Firefox

select:disabled{
   opacity: 0.6;
}
3
Darren Cooney

Für diejenigen, die das noch finden.

Funktioniert nicht:

select[disabled] { background-color: blue; }

Arbeiten:

select option [disabled] { background-color: blue; } will do
1
Joost Boord

Das hat bei mir funktioniert

select[disabled='disabled']::-ms-value {
    color: red;
   }
1
Disha teli

Entschuldigung für mein Englisch...

Bei Verwendung von css ist dies nicht möglich, nur IE erlaubt keine Änderung der Eigenschaften eines deaktivierten select-Tags

1
el_quick

Sie können folgendes versuchen:

    <style>
        /*css style for IE*/
        select[disabled='disabled']::-ms-value {
            color: #555;
        }
        /*Specific to chrome and firefox*/
        select[disabled='disabled'] {
            color: #555;
        }
    </style>
0
sendon1982