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

Question

J'ai remarqué que vous pouvez changer la couleur du texte dans les zones de texte qui sont désactivées dans Firefox en appliquant une classe simple, mais que vous ne pouvez pas le faire dans IE 6/7. Quelqu'un at-il une solution élégante pour y parvenir?

Answer 1

J'ai remarqué que vous pouvez changer la couleur du texte dans les zones de texte qui sont désactivés dans le navigateur Firefox

Je crois que la question est d'essayer de dire, c'est que ceci:

<textarea disabled="disabled" style="color: red;">Hello</textarea>

Résultats dans le texte en gris dans IE, vs red Fox. FWIW, Opéra donne aussi gris, tandis que les navigateurs WebKit donner rouge.

C'est une pure question CSS à voir avec la façon dont beaucoup de champs de formulaire sont rendus en fonction de l'OS du widget et comment beaucoup selon les règles CSS. Cela a toujours été une zone de grand croix-navigateur différence. Les scripts ne sont pas pertinents, autant aimerais "utiliser jQuery" être la réponse à chaque question.

L'habitude de contournement consiste à utiliser ‘readonly' au lieu de ‘disabled', puis utilisez le style (par exemple. fonction off " class="disabled"') de reproduire ce que ombragée handicapés effet que vous voulez. ‘readonly' les contrôles ne sont pas transformés en niveau de l'OS-désactivé widgets, vous donnant plus de latitude pour le style.

Answer 2

J'ai eu le même problème pour <select> éléments dans IE10 et trouvé une solution:

http://jsbin.com/ujapog/90

Microsoft a un pseudo-élément qui permet la couleur du texte pour être modifiés:

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

La règle doit être sur son propre, parce que sinon les autres navigateurs ignorent la règle d'ensemble en raison d'une erreur de syntaxe. Voir http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs. 85).aspx pour Internet Explorer uniquement les pseudo-éléments.

EDIT: L' -ms-value pseudo-élément a été introduit dans IE10 donc ne fonctionne pas sur les versions antérieures.

Answer 3

Le problème avec IE étant qu'il ne peut pas appliquer de style au contrôle désactivé, c'est pourquoi nous devons d'abord le supprimer de nos zones de texte, puis ajouter notre style et désactiver la focalisation sur le contrôle. J'ai aussi essayé de dissocier ('focus') mais cela n'a pas fonctionné.

J'ai donc utilisé JQUERY pour cela:

 var disabledControls = $("input:disabled, textarea:disabled");
    disabledControls.removeAttr('disabled');
    disabledControls.addClass("is-disabled");
    disabledControls.focus(function() {
    this.blur();
});
 

Classe CSS:

 .is-disabled {
    background-color: #EBEBEB;
    color: black !important;   
}
 

Fonctionne parfaitement dans IE8 \ 9 et Chrome ...

Answer 4

Vous pouvez utiliser ce qui suit pour simuler le comportement d'un champ désactivé avec les lignes suivantes:

 // find all disabled fields
$("input:disabled, textarea:disabled, select:disabled").each(function(index){
    // add the class is_disabled
    $(this).addClass("is_disabled");
    // remove the attribut disabled
    $(this).removeAttr('disabled');
    // add new attribut readonly
    $(this).attr('readOnly', 'readOnly');
});
// on submit remove all fields which are still with class is_disabled
$('form').submit(function() {
    // find all fields with class is_isabled
    $("input.is_disabled, textarea.is_disabled, select.is_disabled").each(function(index){
        //  and remove them entirely
        $(this).remove();
    });
    return true;
});
// now don't let anyone click into the fields
// this will simulate the 'disabled' functionality
$('.is_disabled').click(function() {
  $('.is_disabled').blur();
});