web-dev-qa-db-fra.com

Comment changer la couleur des contrôles HTML désactivés dans IE8 à l'aide de css

J'essaie de changer la couleur des contrôles d'entrée lorsqu'ils sont désactivés à l'aide du fichier CSS suivant.

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

Cela fonctionne dans la plupart des navigateurs, mais pas dans IE. Je suis en mesure de modifier les autres propriétés de style telles que couleur d'arrière-plan, couleur de bordure, etc. Quelqu'un peut-il expliquer cela?

htmlcssinternet-explorer
72
Seth Reno

Malheureusement, si vous utilisez l'attribut disabled, peu importe ce que vous essayez IE la couleur du texte par défaut sera Gris, avec une étrange ombre blanche ... mais tous les autres styles fonctionnent . : - /

121
Wayne Austin

J'ai eu le même problème pour les éléments <select> dans IE10 et j'ai trouvé une solution qui ne fonctionne que pour certains éléments:

http://jsbin.com/ujapog/7/

Il existe un pseudo-élément Microsoft qui permet de modifier la couleur du texte:

select[disabled='disabled']::-ms-value {
    color: #000;
}

La règle doit être autonome, sinon les autres navigateurs l'ignoreront en raison d'une erreur de syntaxe. Voir http://msdn.Microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx pour d'autres pseudo-éléments d'Internet Explorer.

Edit: Je pense que la règle devrait probablement être select[disabled]::-ms-value mais je n’ai pas l’ancienne version IE devant moi pour l’essayer - rééditez ce paragraphe ou ajoutez un commentaire si c’est une amélioration.

14
robocat

Il n'y a aucun moyen de remplacer les styles pour l'attribut disable = "disable". Voici mon travail pour résoudre ce problème, notez que je ne sélectionne que les boutons d'envoi dans mon cas:

if ($.browser.msie) {
    $("input[type='submit'][disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("onclick", "javascript:return false;");
    });
}

exemple disponible: http://jsfiddle.net/0dr3jyLp/

8
Hamid

J'ai eu le même problème avec textarea "disabled", changeant la couleur de la police en gris . J'ai fait une solution de contournement en utilisant l'attribut "readonly" au lieu de l'attribut "disabled" de textarea. 

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

Cela a fonctionné pour moi comme un charme !!, je suggère donc d'essayer cette solution avant toute autre solution, car il est facile de remplacer "disabled" par "readonly" sans modifier aucune autre partie du code.

4
Lihkinisak

Je sais que cela fait un moment depuis la création de ce sujet, mais j'ai créé cette solution de contournement, et bien ... Cela a fonctionné pour moi! (Utilisation de IE 9)

La seule conséquence est que vous ne pouvez pas sélectionner la valeur de l'entrée. 

Utiliser Javascript:

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

Je viens de donner à tout l’arrière-plan une couleur gris clair, je pense que cela indique plus facilement/rapidement que la boîte est désactivée.

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

Comme mentionné par Wayne et trois ans plus tard, toujours pas de chance avec IE9, mais ... 

Vous pouvez essayer de baisser la opacity en utilisant CSS, cela le rend plus lisible et facilite l’état désactivé.

1
guzart

La façon dont j'ai résolu le problème de "désactivation" d'un contrôle dans IE sans le vilain gris avec un contrôle d'entrée de type = checkbox était de le laisser activé et d'utiliser un peu de javascript dans l'événement onclick pour empêcher les modifications: 

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

Après avoir lu cet article, j'ai décidé de créer une entrée qui agit de la même manière qu'une boîte d'entrée désactivée, mais qui était "en lecture seule". 

Donc, je l'ai fait pour qu'il ne puisse pas être sélectionné ou tabulé, ou que le curseur de la souris donne à l'utilisateur l'idée qu'il peut modifier ou sélectionner la valeur.

Testé sur 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

Supprimez disabled attribut et utilisez readonly attribut. Rédigez le code CSS requis pour obtenir le résultat souhaité. Cela fonctionne dans IE8 et IE9.

par exemple, pour le gris foncé,

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

J'ai mélangé les solutions de user1733926 et de Hamid et j'ai trouvé un code efficace pour IE8. Il serait bien de savoir si cela fonctionne aussi bien dans 9/10 (?).

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

Veuillez vérifier ce code CSS.

input[type='button']:disabled, button:disabled
 {
    color:#933;
    text-decoration:underline;
}

ou consultez cette URL . http://jsfiddle.net/kheema/uK8cL/13/

0
Kheema Pandey

Pas besoin de remplacer l'approche basée sur les classes d'utilisation CSS et jouer avec les événements fonctionne parfaitement

Vous pouvez faire une chose:

<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

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 une feuille de style à votre élément d’entrée qui fonctionne dans IE et d’autres navigateurs dans votre zone de saisie non modifiable.

0
Homa

Le problème est résolu dans IE11 . Si le problème persiste dans IE11, vérifiez si le moteur de rendu IE est en cours d'utilisation.

0
Aman Srivastava