web-dev-qa-db-fra.com

Comment changer la couleur de la police pour l'entrée désactivée?

Je dois modifier le style d'un élément d'entrée désactivé en CSS.

<input type="text" class="details-dialog" disabled="disabled" />

Comment puis-je faire cela pour Internet Explorer?

cssinternet-explorerinput
49
isxaker

Vous ne pouvez pas pour Internet Explorer.

Voir ce commentaire j'ai écrit sur un sujet connexe:

Il ne semble pas y avoir de bon moyen, voir: Comment changer la couleur des contrôles HTML désactivés dans IE8 en utilisant css - vous pouvez définir l’entrée sur readonly à la place, mais cela a autres conséquences (comme avec readonly, le input sera envoyé au serveur lors de l'envoi, mais avec disabled, ce ne sera pas le cas): http : //jsfiddle.net/wCFBw/4

Voir aussi: Changer la couleur de la police dans les zones de texte de IE qui sont désactivées

45
thirtydot

Vous pouvez:

input[type="text"][disabled] {
   color: red;
}
39
Alex K.

Ce qui suit vous rapproche beaucoup de IE8 et fonctionne également dans d'autres navigateurs.

Dans votre html:

<input type="text" 
       readonly="readonly"    <!-- disallow editting -->
       onfocus="this.blur();" <!-- prevent focus -->
       tabindex="-1"          <!-- disallow tabbing -->
       class="disabledInput"  <!-- change the color with CSS -->
       />

Dans votre CSS:

.disabledInput {
    color: black;
}

Dans IE8, il y a un léger changement de couleur de la bordure en vol stationnaire. Certains CSS pour input.disabledInput: hover pourraient probablement s’occuper de cela.

19
Charles
input[disabled], input[disabled]:hover { background-color:#444; }
7
khan

Remplacez disabled par readonly="readonly". Je pense que c'est la même fonction.

<input type="text" class="details-dialog" readonly="readonly" style="color: ur color;">
4
irfan tri atmojo

Il semble que personne n'a trouvé de solution pour cela. Je n'en ai pas non plus basé uniquement sur les CSS, mais en utilisant cette astuce JavaScript, je peux généralement gérer les champs de saisie désactivés.

N'oubliez pas que les champs désactivés suivent toujours le style qu'ils ont avant leur désactivation. L'astuce serait donc 1- Activer leur 2-Changer la classe 3- Désactivez-les à nouveau. Comme cela se produit très rapidement, l'utilisateur ne peut pas comprendre ce qui s'est passé.

Un code JavaScript simple serait quelque chose comme:

function changeDisabledClass (id, disabledClass){
var myInput=document.getElementById(id);
myInput.disabled=false;             //First make sure it is not disabled
myInput.className=disabledClass;    //change the class
myInput.disabled=true;             //Re-disable it
}
2
Arash

Vous pouvez utiliser le style suivant avec opacité

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
    opacity: 0.85 !important;
}

ou une classe CSS spécifique

.ui-state-disabled{
    opacity: 0.85 !important;
}
1
myset

C'est la solution que j'ai trouvée pour ce problème:

// Si IE

inputElement.writeAttribute ("unselectable", "on");

//D'autres navigateurs

inputElement.writeAttribute ("désactivé", "désactivé");

En utilisant cette astuce, vous pouvez ajouter à votre élément d’entrée une feuille de style qui fonctionne dans IE et d’autres navigateurs dans votre zone d’entrée non modifiable.

1
Homa

Cela fonctionne pour que les options de sélection désactivées agissent comme des en-têtes. Il ne supprime pas l'ombre de texte par défaut de l'option: disabled mais il supprime l'effet de survol. Dans IE vous n'obtiendrez pas la couleur de la police, mais au moins, l'ombre du texte aura disparu. Voici le code html et css:

select option.disabled:disabled{color: #5C3333;background-color: #fff;font-weight: bold;}
select option.disabled:hover{color:  #5C3333 !important;background-color: #fff;}
select option:hover{color: #fde8c4;background-color: #5C3333;}
<select>
     <option class="disabled" disabled>Header1</option>
     <option>Item1</option>
     <option>Item1</option>
     <option>Item1</option>
     <option class="disabled" disabled>Header2</option>
     <option>Item2</option>
     <option>Item2</option>
     <option>Item2</option>
     <option class="disabled" disabled>Header3</option>
     <option>Item3</option>
     <option>Item3</option>
     <option>Item3</option>
</select>
1
yardpenalty

Vous pouvez utiliser readonly à la place. La suite ferait l'affaire pour vous.

<input type="text" class="details-dialog" style="background-color: #bbbbbb" readonly>

Mais vous devez noter ce qui suit. Cela dépend de vos besoins, vous pouvez l'utiliser.

Un élément en lecture seule n'est tout simplement pas éditable, mais est envoyé lorsque le formulaire correspondant est soumis. Un élément désactivé n'est pas modifiable et n'est pas envoyé lors de la soumission.

0
Dulith De Costa