web-dev-qa-db-fra.com

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

Le HTML simple ci-dessous s'affiche différemment dans les navigateurs basés sur 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 léger (comme s'il avait une certaine transparence qui lui est 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 y en a façon 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>
iphonehtmlcsssafariwebkit
77
Incidently
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
186
Kemo

Les navigateurs Webkit pour téléphone et tablette (Safari et Chrome) et le bureau IE ont un certain nombre de modifications par défaut des éléments de formulaire désactivés que vous devrez remplacer si vous souhaitez styliser 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 */
42
lijinma

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

6
Kornel

c'est une question intéressante et j'ai essayé beaucoup de remplacements pour voir si je peux y arriver, mais rien ne fonctionne. Les navigateurs modernes utilisent en fait leurs propres feuilles de style pour indiquer aux éléments comment s'afficher, donc peut-être que si vous pouvez flairer la feuille de style de Chrome, vous pouvez 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 quand j'aurai du temps à perdre.

FYI,

opacity: 1!important;

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

6
Steve Perks

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;
4
vanduc1102

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

<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

4
Serxipc

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, donc la propriété color de l'entrée sera utilisée.

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

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

2
Freez

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

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 */
}
2
paulcol.

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