clubmate.fi

Change the form field placeholder text color

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:

::-webkit-input-placeholder,
::-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.