117 votes

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

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

Dans Firefox, à la fois frontière et le texte de la même couleur (#880000), mais dans Safari, le texte est un peu plus léger (comme si elle avait une certaine transparence est appliquée).

Je peux en quelque sorte la résoudre (supprimer cette transparence dans Safari)?

Mise à JOUR:
Merci pour vos réponses. Je n'en ai pas besoin pour mon travail de plus (au lieu de désactiver, je suis le remplacement des éléments d'entrée avec style des éléments div), mais je suis toujours curieux de savoir pourquoi cela se produit et si il n'y a aucun 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>

276voto

Kemo Points 516
-webkit-text-fill-color:#880000

45voto

lijinma Points 619
 -webkit-text-fill-color:#880000;
/* The opacity must be set to 1*/
-webkit-opacity: 1;
 

Pour safari mobile, ces deux propriétés doivent être définies.

6voto

porneL Points 42805

Vous pouvez changer la couleur à #440000 seulement pour Safari, mais à mon humble avis la meilleure solution serait de ne pas changer les regards de bouton du tout. Ainsi, dans tous les navigateurs, sur toutes les plateformes, les utilisateurs l’espèrent.

6voto

Steve Perks Points 2117

c'est une question intéressante, et j'ai essayé beaucoup de remplacements pour voir si je peux obtenir ce que ça va, mais rien ne marche. Les navigateurs modernes réellement utiliser leurs propres feuilles de style pour dire des éléments à afficher, alors peut-être si vous pouvez renifler google Chrome, feuille de style, vous pouvez voir ce que les styles ils sont forcés à elle. Je serai très intéressé par le résultat et si vous n'en avez pas, je vais passer un peu de temps à me chercher plus tard, lorsque j'ai du temps à perdre.

Pour info,

opacity: 1!important;

ne pas le remplacer, donc je ne suis pas sûr que c'est l'opacité.

4voto

Serhii Points 3467

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 sur w3.org

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X