moz-placeholder does not work in Firefox

Question

Please see the code below, the CSS for the placeholder does not work in the Firefox (latest version), but it works fine with the Chrome. How can I fix it for Firefox?

There are multiple input colors for the fields, but I only one color for the placeholder, so I do not want to specify any class name in the moz-placeholder property, so that it applies to all input fields.

HTML:

<div class="row">
    <input type="text" placeholder="some text asdf" value="" />
</div>

CSS:

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

.row input[type="text"]{
     color: blue;     
}

Demo: http://jsfiddle.net/C6fjh/

Jeroen Jeroen · Accepted Answer · 2012-12-23T20:14:25

I'ts working, it's just that the last rule is considered more specific by Firefox. Try this:

::-webkit-input-placeholder { color:red; }
.row input[type="text"]::-moz-placeholder { color:red; }
.row input[type="text"]:-moz-placeholder { color:red; }

.row input[type="text"] {
     color: blue;     
}

See this fiddle for a working demo.

I'm unsure where the difference in browsers comes from, or which one is "correct". A similar experiment with a tag and :hover pseudo class shows the same behavior in both FF and Chrome: both will ignore the pseudo class color if the element's selector is more specific (and if you make the same change as I suggested above you get the same (expected?) behavior in both Chrome and FF).

moz-placeholder does not work in Firefox

2 Answers