Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

moz-placeholder does not work in Firefox

Tags:

css

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/

like image 471
user1355300 Avatar asked Dec 23 '12 20:12

user1355300


2 Answers

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;}

like image 92
Hilario Goes Avatar answered Jan 26 '23 10:01

Hilario Goes


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).

like image 37
Jeroen Avatar answered Jan 26 '23 11:01

Jeroen