Home/ Questions/Q 7656355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T12:44:37+00:00

I was surprised that this didn’t work in Firefox (try it on Chrome and

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0