intternet.dev

dev log

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" placeholder="Type or die..." />

The default on this site looks like this:

The CSS:

/* Safari & Chrome */
.search-field::-webkit-input-placeholder {
  color: tomato;
}
 
/* Firefox */
.search-field::-moz-placeholder {
  color: tomato;
}
.search-field:-moz-placeholder {
  color: tomato;
}
 
/* IE */
.search-field:-ms-input-placeholder {
  color: tomato;
}

Results into:

Notice that you can’t chain them like this:

::-webkit-input-placeholder,
::-moz-placeholder {
  /* This won't work */
  color: tomato;
}

Notices

In older browser the placeholder="" won’t work, then you can use this nice jQuery plugin.

The above plugin does not exist anymore, use some of these solutions:

The below bug has been fixed:

  • WebKit bug: Try to text-align: center;. It won't work in WebKit because this bug