Reputation: 579
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
Upvotes: 4
Views: 390
Reputation: 35084
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.
Upvotes: 2
Reputation: 241278
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.
Upvotes: 2