Styling HTML5 input placeholders with CSS

This one is more for my own reference, as the web designers I work with love using input placeholder text when designing any contact forms for our clients websites. However, this could be handy for any coders, particular front-end developers.

A placeholder is the text that appears in HTML input fields, which can be used to label or describe the field to the user. Generally, this text will sit in the field until you place your cursor in (desktop) or tap on the field (touch devices) and start typing.

Placeholders were introduced as a default attribute in HTML5, which means they won’t be compatible in all web browsers, so it may be a good idea to have a fall back using javascript. You can find the full browser compatibility for the placeholder attribute at CanIUse.com.

Simply adding styles to the input field doesn’t necessarily style the placeholder text. This is actually a good thing so that you can differentiate them from the text that you type into the field.

For cross-browser compatibility there are a number of different elements that you can use.

::-webkit-input-placeholder { color: red; }
::-moz-placeholder { color: red; } // Firefox 19 and above
:-moz-placeholder { color: red; } // Firefox 18 and below
:-ms-input-placeholder { color: red; }

HTML:

<input class="field" type="text" value="name" placeholder="Your Name Here" />

CSS:

.field::-webkit-input-placeholder { color: red; }
.field::-moz-placeholder { color: red; }          // Firefox 19 and above
.field:-moz-placeholder { color: red; }           // Firefox 18 and below
.field:-ms-input-placeholder { color: red; }