A good[ish] website

Web development blog, loads of UI and JavaScript topics

Change the form field placeholder text color

Filed under: Styling— Tagged with: CSS

Here’s how to change the placeholder text color on a form fields.

Example HTML:

<input class="search-field" value="" placeholder="Type or die..." />

The default look is something like this:

And here’s the CSS that makes the color change:

/* Safari & Chrome */
.search-field::-webkit-input-placeholder {
  color: red;

/* Firefox */
.search-field::-moz-placeholder {
  color: red;

.search-field:-moz-placeholder {
  color: red;

/* IE */
.search-field:-ms-input-placeholder {
  color: red;

Results into:

Notice that you can’t chain them like this:

::-moz-placeholder {
  /* This won't work */
  color: red;

In older browser the placeholder="" won’t work, then you can use this nice jQuery plugin. The plugin does not exist anymore, use some of these solutions: this or this.

Webkit bug: Try to text-align:center; wont work in Webkit thanks to this bug. Now fixed.

Comments would go here, but the commenting system isn’t ready yet, sorry.

  • © 2022 Antti Hiljá
  • About
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!