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

Question 1

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>

Question 2

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

Question 3

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

Question 4

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

Question 5

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.

Question 6

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

Question 7

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

Question 8

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;

Question 9

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/

Question 10

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

Question 11

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>

Answer 1

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>

Answer 2

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

Answer 3

235

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

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

Answer 4

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

Answer 5

11

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

David Jones

Answer 6

7

opacity:1est également nécessaire.

Marcel Falliere

Answer 7

3

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

Andy Mercer

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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.

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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;

Answer 19

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/

Answer 20

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

Answer 21

3

et pour Firefox, utilisez input: -moz-placeholder

stephan.com

Answer 22

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

Answer 23

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>

la source

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

Answer 24

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

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

Réponses: