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

93

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

Dans Firefox, la bordure et le texte ont la même couleur ( #880000), mais dans Safari, le texte devient un peu plus clair (comme s'il avait une certaine transparence appliquée).

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

<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>

— Incidemment
source

J'ai aussi remarqué cela, pour moi c'est un bug, car lorsque vous mettez background-color: white de l'entrée, il affichera à nouveau correctement la couleur. L'opacité a également peu d'effet. Bien que le -webkit-text-fill-color: # 880000 fonctionnera

— Miguel

235

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

— Kemo
source

51

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); -opacité du webkit: 1; fond: blanc;

— Ryan

11

@Ryan a raison - l'opacité doit être définie sur 1Mobile Safari.

— David Jones

7

opacity:1est également nécessaire.

— Marcel Falliere

3

L'opacité n'est pas nécessaire dans les versions actuelles de Safari, à partir de l'été 2016.

— Andy Mercer

2

J'ai sauvé ma journée! Pourtant, cela affecte également la coloration de la placeholdercouleur du texte de l' inputélément. Au cas où vous auriez besoin d'un correctif pour cela aussi, regardez ce lien: css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

Les navigateurs Webkit pour téléphones et tablettes (Safari et Chrome) et IE de bureau comportent un certain nombre de modifications par défaut des éléments de formulaire désactivés que vous devrez remplacer si vous souhaitez appliquer un style aux 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 */

— lijinma
source

6

c'est une question intéressante et j'ai essayé de nombreuses dérogations pour voir si je peux la faire démarrer, mais rien ne fonctionne. Les navigateurs modernes utilisent en fait leurs propres feuilles de style pour indiquer aux éléments comment s'afficher, alors peut-être que si vous pouvez flairer la feuille de style de Chrome, vous pourrez voir les styles qu'ils imposent. Je serai très intéressé par le résultat et si vous n'en avez pas, je passerai un peu de temps moi-même à le chercher plus tard quand j'aurai du temps à perdre.

FYI,

opacity: 1!important;

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

— Steve Perks
source

Merci! Je n'ai pas trouvé d'explication (rien de tel dans la feuille de style de l'agent utilisateur de Chrome - uniquement "background-color: rgb (235, 235, 228)" pour les entrées désactivées) et j'utilise une solution de contournement, mais je suis toujours curieux de savoir ce qui se passe le ...

— Incidemment

Steve, merci pour l'effort, mais je vous suggère à l'avenir de poster ceci comme un commentaire plutôt qu'une réponse.

— avernet

6

Vous pouvez changer la couleur à #440000juste pour Safari, mais à mon humble avis la meilleure solution serait de ne pas apparence de changement de bouton du tout . De cette façon, dans chaque navigateur sur chaque plate-forme, il ressemblera à ce que les utilisateurs attendent.

— Kornel
source

5

MISE À JOUR 2019:

Combiner les idées de cette page dans une solution «définir et oublier».

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 */
}

— paulcol.
source

4

Vous pouvez utiliser l'attribut readonly au lieu de l'attribut disabled, mais vous devrez alors 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 les mêmes. Une entrée en lecture seule peut avoir le focus et enverra des valeurs lors de la soumission. Regardez w3.org

— Serxipc
source

merci mec oui, c'était aussi ma première idée, mais cela ne fonctionne pas pour moi à cause de la concentration: sur iPhone, le clavier apparaît lorsqu'un utilisateur appuie sur un élément en lecture seule, et c'est déroutant j'ai trouvé ma solution de contournement, et mon question est plutôt «théorique» - pourquoi ce comportement?

— Incidemment

Solution intéressante: la question de la mise au point pose également des problèmes d'utilisabilité, en particulier pour les personnes utilisant des lecteurs d'écran. Dans la plupart des cas, vous ne voudriez tout simplement pas que les utilisateurs puissent accéder aux champs en lecture seule / désactivés dans un formulaire.

— avernet

4

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;

— vanduc1102
source

3

Si vous souhaitez résoudre le problème pour toutes les entrées désactivées, vous pouvez définir -webkit-text-fill-colorà currentcolor, ainsi la colorproprié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/

— Freez
source

2

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

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

— conceptDawg
source

3

et pour Firefox, utilisez input: -moz-placeholder

— stephan.com

1

eh .. c'est pour l'attribut d'espace réservé, je ne pense pas que cela ait un effet sur les champs désactivés. La réponse de @ Kemo ci-dessous ( -webkit-text-fill-color) fonctionne bien

— philfreo

0

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>

pas vraiment ... dans ma vraie application, ces zones de texte sont généralement activées et utilisées pour la saisie, et ce n'est que sous certaines conditions qu'elles sont désactivées avec JavaScript.Je peux trouver une solution de contournement (comme, remplacer <input /> par un style <div> < / div> au lieu de définir `` désactivé '') - mais il se sent vraiment mal

— Incidemment