Pourquoi Firefox modifie-t-il mes couleurs d'entrée / espace réservée?

Question

J'ai tout essayé pour que Firefox utilise la couleur que je spécifie comme couleur pour l'espace réservé sur mes formulaires. Y compris en utilisant :-moz-placeholder Dans mon CSS et tout, mais la couleur résultante n'est jamais ce que je spécifie.

Je suis conscient que Firefox utilise un gris clair a sa couleur d'entrée / espace réservée par défaut, mais pourquoi y a-t-il une option pour la modifier si elle ne le change pas vraiment?

Voici un codepen que j'ai fait pour démontrer, y compris tous les CSS spécifiques à Firefox:

Agé de: http://codepen.io/jtlr/pen/bpjft

Nouveau: http://codepen.io/jtlr/pen/ekjhh

Answer 1

Voici quel est le style d'espace réservé par défaut dans Firefox:

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 0.54;
}

sans aucun style de couleur (référence est http://hg.mozilla.org/mozilla-central/file/a07aebef20e7/layout/style/forms.css#l160). C'est important, car de cette façon si vous mettez simplement color et background Sur votre contribution, et je n'ai pas de style d'espace réservé spécial, il ramassera la couleur que vous définissez, mais la rendra plus disparue.

Donc, si vous voulez relier complètement l'espace réservé, définissez son opacité à 1.

Answer 2

Firefox 19+ nécessite 2 colons.::

Alors utilisez ::-moz-placeholder

Le pseudo-élément :: - Moz-Placeholder a été introduit en remplacement de la pseudo-classe: -moz-employeur qui a été obsolète dans Firefox 19.

par opposition à :-moz-placeholder

La pseudo-classe: -moz-lieu sera obsolète en faveur de la pseudo-élément :: Moz-Placeholder dans Firefox 19.

Exemple de codepen de travail - FF uniquement.

::-moz-placeholder {
  color:red;
}

En dehors de cela, il s'agit d'un sélecteur, par opposition à une propriété. Par conséquent,

p { :-moz-placeholder: #000000; }

Est incorrect.