2010-09-30 3 views
19

Un de nos clients a du mal à lire le texte gris dans les contrôles handicapés dans notre application Web:Styling désactivé <select> (listes déroulantes) en HTML

IE9 example

Nous voudrions changer le style à un fond gris clair et un texte noir. Malheureusement, la plupart des navigateurs (y compris IE, qui est ce que le client utilise) ignorent l'attribut CSS color: ... sur les contrôles désactivés, donc nous ne pouvons pas changer la couleur de premier plan. Pour les zones de texte (input type="text"), vous pouvez facilement contourner ce problème en utilisant l'attribut readonly au lieu de disabled. Malheureusement, ce n'est pas une option pour les listes déroulantes (select) ou les cases à cocher (input type="checkbox").

Y a-t-il une solution de contournement facile pour cela? Préférablement celui où le contrôle n'a pas besoin d'être remplacé par un autre type de contrôle? (... puisque nos contrôles sont rendus par ASP.NET)

PS: L'utilisation du sélecteur [disabled] en CSS ne fait pas de différence.

+0

double possible: http://stackoverflow.com/questions/679358/how-do-i-styling-disabled-select-dropdownlist-in-ie – Peter

+0

@Peter: La réponse à la question ne s'applique pas 679358 : Ce n'est pas un problème que le sélecteur '[disabled]' ne fonctionne pas. C'est un problème de IE (y compris 8, 9) ne permettant pas de remplacer la couleur du texte des contrôles désactivés. – Heinzi

+7

Demandez au client de baisser la luminosité de son moniteur. – Kyle

Répondre

26

Dans Internet Explorer 9, le support sera ajouté pour la :disabled pseudo-sélecteur (ref). Je ne sais pas si cela va honorer la propriété "couleur", mais cela semble probable.

Dans les anciennes versions d'IE, vous pouvez ajuster la couleur d'arrière-plan (mais pas la couleur). Ainsi:

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

qui fonctionne dans IE 7 et IE 8. Vous pouvez toujours pas modifier la couleur de premier plan, mais vous pouvez changer la couleur d'arrière-plan contraste plus fortement avec le gris que IE attribue quand il est désactivé.

+3

IE9 ne prend pas en charge la propriété "color" lorsqu'elle est désactivée. Le texte est toujours aussi laid avec une ombre blanche. – Craigo

+0

Les options sélectionnées ne sont pas prises en charge dans IE ou Chrome –

1

Désolé pour mon anglais ...

Ce n'est pas possible en utilisant css juste, IE ne permet pas de propriétés de changement d'une balise select désactivé

1

Pour ceux qui trouvent encore cela.

ne fonctionne pas:

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

travail:

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

Cela a fonctionné pour moi

select[disabled='disabled']::-ms-value { 
    color: red; 
    } 
2

Cela a fonctionné pour moi dans WebKit et Firefox

select:disabled{ 
    opacity: 0.6; 
} 
Questions connexes