Firefox placeholder color changes

Question

I was surprised that this didn't work in Firefox (try it on Chrome and Firefox: http://jsfiddle.net/YzkSx/):

<!doctype html>  
<html>  
<head>  
  <title>Placeholder demo</title>  
  <style type="text/css">
      input {color: red}
  </style>  
</head>  
<body>  
  <input id="test" placeholder="Placeholder text!">  
</body>  
</html>

Because I apply a red color to the input, the placeholder ends up being red as well. In Chrome and Safari, if I 'color' the input, the placeholder is not affected.

I know about the :moz-placeholder pseudo-class, but it seems like I shouldn't have to bother with that if all I want is a different color applied to the input when a user starts typing.

Thanks for your help!

I don't think there is elegan solution for doing that. See related http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — antyrat, Mar 15 '12 at 16:18

score 2 · Accepted Answer · answered Mar 15 '12 at 17:53

This is actually a conscious implementation choice (and the reason the placeholder styling is a pseudo-class, not a pseudo-element). The problem with the WebKit approach here is that if you style both color and background of an input with a placeholder, WebKit will apply the background color but not the color style and the placeholder text can easily end up unreadable. Of course you can work around that with placeholder-specific styles, but people typically forget to.

score 1 · Answer 2 · answered Mar 15 '12 at 16:18

1

For firefox you will have to use their styling as that is how the browser renders. Just one more sign that FF is falling out of touch with maintaining the "standards everyone but IE useses". You can easily do it as follows:

input: { 
    color: red;
}
input:-moz-placeholder {  
    color: #a1a1a1;  
}

As long as browsers continue to fight for control over "standards", this will continue to be an issue. Unfortianatly, IE and FF both are fighting webkit with everything they got, but as has been seen in past updates, FF may eventually come around, as for IE ....

answered Mar 15 '12 at 16:18

SpYk3HH

22,272
11
70
81

2

The goal should be "everyone uses one standard", not "everyone uses one standard, except IE which uses another one". An the goal should lean toward "the standard is something that makes sense", not necessarily "the standard is whatever someone ships first". In this case, WebKit is doing something that has some serious drawbacks (and which they have not proposed for standardization). Mozilla is doing something that has a different set of drawbacks (likewise not proposed for standardization yet). Once people figure out how to do this sanely, it should get standardized. – Boris Zbarsky Mar 15 '12 at 17:55

score 0 · Answer 3 · answered Mar 15 '12 at 16:18

0

maybe you can achieve almost the same effect with

input { color: ... }
input:focus { color: ... }

without using -moz-placeholder.

answered Mar 15 '12 at 16:18

Fabrizio Calderan

120,726
26
164
177

score 0 · Answer 4 · answered Mar 15 '12 at 16:18

0

You have to remember brother that HTML5 is not a Standard yet so you will get a bunch of weird little errors. But, if I may, I do not see any red text via the Placeholder within the Input Element.

answered Mar 15 '12 at 16:18

Aaron Brewer

3,567
18
48
78

score 0 · Answer 5 · answered Mar 15 '12 at 16:26

Most cross-browser, reliable, and future-proof way to style placeholder text currently is to remove native placeholder attribute with JavaScript and emulate corresponding functionality with JS.

In case of you don't need to style placeholder text itself, :focus pseudoclass probably should be sufficient, indeed.

Firefox placeholder color changes

5 Answers5