Why is Firefox altering my input/placeholder colours?

Question

I have tried everything to get Firefox to use the colour I'm specifying as the colour for the placeholder on my forms. Including using :-moz-placeholder in my CSS and everything yet the resulting colour is never what I specify.

I'm aware that Firefox uses a lightish grey a its default input/placeholder colour, but why is there an option to change it if it doesn't really fully change it?

Here's a codepen I made to demonstrate including all Firefox specific CSS:

Old: http://codepen.io/JTLR/pen/BpJft

New: http://codepen.io/JTLR/pen/EkJhH

Answer 1

Here's what the default placeholder styling in Firefox is:

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

without any color styles at all (reference is http://hg.mozilla.org/mozilla-central/file/a07aebef20e7/layout/style/forms.css#l160). This is important, because this way if you just set color and background on your input, and don't have any special placeholder styling it'll pick up the color you set but just make it look more faded out.

So if you want to completely restyle the placeholder, set its opacity to 1.

Answer 2

Firefox 19+ requires 2 colons..::

So use ::-moz-placeholder

The ::-moz-placeholder pseudo-element was introduced as a replacement for the :-moz-placeholder pseudo-class that has been deprecated in Firefox 19.

as opposed to :-moz-placeholder

The :-moz-placeholder pseudo-class will be deprecated in favor of the ::-moz-placeholder pseudo-element in Firefox 19.

Working CodePen example - FF only.

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

Aside from that, this is a selector, as opposed to a property. Therefore,

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

Is incorrect.