How to style placeholder text in CSS

Snippet published on December 22, 2016 by @markvaneijk in CSS

Changing appearance of the placeholder text of an input is a little quirky to do, be cause there is no standard for this CSS. So it works different in every browser, but it's possible!

Currently, you can't declare the rules using one declaration, you have to set the declarations separately like the example below.

/* Chrome/Opera/Safari and other webkit browsers */
::-webkit-input-placeholder {
  color: blue;
}

/* Internet Explorer 10 and newer */
:-ms-input-placeholder {
  color: blue;
}

/* Firefox 19 and newer */
::-moz-placeholder {
  color: blue;
}

 /* Firefox 18 and older */
:-moz-placeholder {
  color: blue;
}