# Change the form field placeholder text color

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

Example HTML:

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

The default on this site looks like this:

The CSS:

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

```css
::-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](http://webcloud.se/code/jQuery-Placeholder/).~~

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

- [Cross-Browser HTML5 Placeholder Text](https://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text)
- [Cross-Browser Support for HTML5 Placeholder](https://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/#.UZy8xSspYzs)

The below bug has been fixed:

- **WebKit bug:** Try to `text-align: center;`. It won't work in WebKit because
  [this bug](https://bugs.webkit.org/show_bug.cgi?id=54814)