web-dev-qa-db-fra.com

Les espaces réservés de saisie de texte ne s'affichent pas dans IE et Firefox

Mes espaces réservés de saisie de texte refusent de s'afficher dans IE et Firefox malgré l'utilisation de l'attribut -moz-placeholder. Cela peut être affiché sur la page de contact ici si vous utilisez Firefox ou IE.

Quelqu'un peut-il m'aider, j'essaie de comprendre cela depuis des semaines. Un exemple de mon code est ci-dessous:

 input::-moz-placeholder, textarea::-moz-placeholder {
    color: #aaa;
    font-size: 18px;
}

    input:-ms-input-placeholder, textarea::-ms-input-placeholder {
        color: #aaa;
        font-size: 18px;
    }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #aaa;
    font-size: 18px;
}
htmlcross-browserplaceholder
19
Michelle M.

Comme luke2012 l'a déclaré, cela se produit lorsque box-sizing: border-box; est utilisé sur les champs de saisie de type texte. Cependant, cela ne se produit que lorsqu'une hauteur fixe est utilisée (comme dans le cadre Bootstrap) et qu'il y a trop de remplissage en haut et en bas. Ce qui empêche non seulement le texte de l'espace réservé de s'afficher mais aussi le texte d'entrée ainsi que dans Firefox.

Je trouve que la meilleure solution est de garder box-sizing: border-box; et pour supprimer à la place le rembourrage supérieur et inférieur et augmenter la hauteur jusqu'à la hauteur totale souhaitée pour le champ de saisie (y compris toute bordure).

input[type="email"], input[type="password"], input[type="text"] 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 42px; // Increase height as required
    margin-bottom: 30px;
    padding: 0 20px; // Now only left & right padding
}

Cela garde les choses plus cohérentes et fonctionne bien sur les frameworks tels que Bootstrap.

Vous pouvez également augmenter la hauteur fixe ou définir height: auto; et ajustez le rembourrage supérieur et inférieur selon les besoins.

40
Simon Watson
::-webkit-input-placeholder { /* Chrome, Safari */
   color: #aaa;
   font-size: 18px;
}

:-moz-placeholder {           /* Firefox 18- */
   color: #aaa;
   font-size: 18px;
}

::-moz-placeholder {          /* Firefox 19+ */
  color: #aaa;
  font-size: 18px;
}

:-ms-input-placeholder {      /* Internet Explorer */
  color: #aaa;
  font-size: 18px;
}
5
mdesdev

Il semble -moz-box-sizing est à l'origine de votre problème.

input[type="email"], input[type="password"], input[type="text"] 
{
    -moz-box-sizing: border-box; // remove this line
    height: 25px;
    margin-bottom: 30px;
    padding: 20px;
}

La suppression de la ligne perturbera vos tailles d'entrée afin que vous puissiez ajouter une règle générale pour le dimensionnement des boîtes à votre CSS.

*, *:before, *:after {
    -moz-box-sizing: border-box;
}
3
luke2012

Essayez de réduire les rembourrages supérieur et inférieur. Un peu comment le rembourrage vertical recouvre l'espace réservé. N'oubliez pas de définir le height de l'élément sur 100%.

input[type="email"], input[type="password"], input[type="text"] { padding: 0 20px; height: 100%; }

2
Ata Iravani