placeholder does not work in Firefox

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/

---

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

---

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.

Eg

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

链接地址: http://www.djcxy.com/p/70524.html

上一篇: 更改输入占位符颜色较暗

下一篇: 占位符在Firefox中不起作用