web-dev-qa-db-fra.com

Style désactivé <HTML> (liste déroulante) en HTML

Un de nos clients a du mal à lire le texte en gris des contrôles désactivés de notre application Web:

IE9 example

Nous aimerions changer le style en un fond gris clair et un texte en noir. Malheureusement, la plupart des navigateurs (y compris IE, ce que le client utilise) ignorent l'attribut CSS color: ... sur les contrôles désactivés. Nous ne pouvons donc pas modifier la couleur de premier plan.

Pour les zones de texte (input type="text"), il est facile de contourner ce problème en utilisant l'attribut readonly au lieu de l'attribut disabled. Malheureusement, ce n'est pas une option pour les listes déroulantes (select) ou les cases à cocher (input type="checkbox").

Existe-t-il une solution de contournement facile pour cela? De préférence une solution 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 aucune différence.

htmlcssaccessibility
19
Heinzi

Dans Internet Explorer 9, un support sera ajouté pour le pseudo-sélecteur :disabled ( ref ). Je ne sais pas si cela honorera la propriété "color", 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>

Cela fonctionne dans IE 7 et IE 8. Vous ne pouvez toujours pas modifier la couleur de premier plan, mais vous pouvez modifier la couleur d'arrière-plan afin de contraster davantage avec le gris que IE lui attribue lorsque c'est désactivé.

28
Will Martin

Cela a fonctionné pour moi dans webkit et Firefox

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

Pour ceux qui trouvent encore cela.

Ne fonctionne pas: 

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

Travail: 

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

Cela a fonctionné pour moi

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

Désolé pour mon anglais...

Ce n'est pas possible en utilisant simplement CSS, IE n'autorise pas les propriétés de changement d'une balise de sélection désactivée.

1
el_quick

Vous pouvez essayer ce qui suit:

    <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