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/
In some cases the red color will show lighter in Mozilla as compared to Chrome or IE. In that case you need to add opacity:1 to it too.
E.g.
:-moz-placeholder { color: red; opacity:1;}
::-moz-placeholder { color: red; opacity:1;}
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With