Couleur du texte d'entrée désactivé

StackOverflow https://stackoverflow.com/questions/262158

Question

Le code HTML simple ci-dessous s'affiche différemment dans les navigateurs Firefox et WebKit (j'ai vérifié Safari, Chrome et iPhone).

Dans Firefox, les bordures et le texte ont la même couleur ( # 880000 ), mais dans Safari, le texte devient un peu plus clair (comme si une certaine transparence était appliquée).

Puis-je résoudre ce problème (supprimer cette transparence dans Safari)?

MISE À JOUR:
Merci pour vos réponses. Je n’en ai plus besoin pour mon travail (au lieu de désactiver, je remplace les éléments input par des éléments stylisés div ), mais je suis toujours curieux de savoir pourquoi cela se produit et s’il existe un moyen de contrôler ce comportement ... 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    input:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <input type="text" value="disabled input box" disabled="disabled"/>
    </form>
</body>
</html>
Était-ce utile?

La solution 

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

Autres conseils

Les navigateurs web pour téléphones et tablettes (Safari et Chrome) et le bureau IE intègrent un certain nombre de modifications par défaut des éléments de formulaire désactivés que vous devrez remplacer si vous souhaitez styler les entrées désactivées. 

-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */

C’est une question intéressante et j’ai essayé de nombreuses substitutions pour voir si je pouvais le faire, mais rien ne fonctionnait. Les navigateurs modernes utilisent leurs propres feuilles de style pour indiquer aux éléments comment afficher. Par conséquent, si vous pouvez consulter la feuille de style de Chrome, vous pourrez voir quels styles ils y imposent. Je serai très intéressé par le résultat et si vous n'en avez pas, je passerai moi-même un peu de temps à le chercher plus tard, lorsque j'aurai du temps à perdre.

À titre d'information, 

opacity: 1!important;

ne le remplace pas, donc je ne suis pas sûr que ce soit l'opacité.

Vous pouvez changer la couleur en # 440000 uniquement pour Safari, mais à mon humble avis, la meilleure solution serait de ne pas modifier l'apparence du bouton du tout . . Ainsi, dans tous les navigateurs, sur toutes les plateformes, les utilisateurs l’auront ressemblé.

Vous pouvez utiliser l'attribut readonly au lieu de l'attribut disabled, mais vous devrez ensuite ajouter une classe car il n'y a pas d'entrée de pseudo-classe: readonly. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
    border:solid 1px #880000;
    background-color:#ffffff;
    color:#880000;
}
</style>
</head>
<body>
<form action="">
    <button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>

Attention, une entrée désactivée et une entrée en lecture seule ne sont pas identiques. Une entrée en lecture seule peut avoir le focus et enverra des valeurs lors de la soumission. Regardez w3.org

pour @ryan

Je voulais que ma boîte de saisie désactivée ressemble à une boîte normale. C’est la seule chose qui fonctionnerait dans Safari Mobile. 

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;

Cette question est très ancienne, mais je pensais publier une solution Webkit mise à jour. Utilisez simplement le CSS suivant: 

input::-webkit-input-placeholder {
  color: #880000;
}

Si vous souhaitez résoudre le problème pour toutes les entrées désactivées, vous pouvez définir -webkit-text-fill-color en currentcolor , de sorte que la couleur La propriété de l'entrée sera utilisée. 

input[disabled] {
   -webkit-text-fill-color: currentcolor;
}

Voir ce violon sur Safari https://jsfiddle.net/u549yk87/3/

À JOUR 2019:

Combinaison des idées de cette page dans un " définir et oublier " solution. 

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}

Pouvez-vous utiliser un bouton au lieu d'une entrée? 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    button:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <button type="button" disabled="disabled">disabled input box</button>
    </form>
</body>
</html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top