Perché Firefox sta alterando i miei colori di input/segnaposto?

Question

Ho provato di tutto per convincere Firefox a usare il colore che sto specificando come colore per il segnaposto sulle mie forme. Compreso l'uso :-moz-placeholder Nel mio CSS e tutto il colore risultante non è mai ciò che specifico.

Sono consapevole che Firefox usa un grigio leggero A il suo colore di input/segnaposto predefinito, ma perché esiste un'opzione per cambiarlo se non lo cambia completamente?

Ecco un codepen che ho fatto per dimostrare tra cui tutti i CSS specifici di Firefox:

Vecchio: http://codepen.io/jtlr/pen/bpjft

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

Answer 1

Ecco cosa è lo stile di segnaposto predefinito in Firefox:

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

Senza alcun colore di colore (il riferimento è http://hg.mozilla.org/mozilla-central/file/a07aebef20e7/layout/style/forms.css#l160). Questo è importante, perché in questo modo se si imposta color e background Sul tuo contributo, e non avere uno stile di segnaposto speciale, raccoglierà il colore che hai impostato, ma lo farà sembrare più sbiadito.

Quindi, se vuoi ripristinare completamente il segnaposto, imposta la sua opacità su 1.

Answer 2

Firefox 19+ richiede 2 due punti ..::

Quindi usa ::-moz-placeholder

Lo pseudo-elemento di Moz-placeholder è stato introdotto in sostituzione del pseudo-Classe:-MOZ-Placeholder che è stato deprecato in Firefox 19.

al contrario di :-moz-placeholder

La classe pseudo-porta-porta-place-holder sarà deprecata a favore dello pseudo-elemento di moz-placeholder in Firefox 19.

Esempio di codepen di lavoro - Solo FF.

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

A parte questo, questo è un selettore, al contrario di una proprietà. Perciò,

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

Non è corretto.