clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Change the form field placeholder text color

Filed under: HTML/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:

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

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!