Custom styling of input placeholder with CSS

Jul 31, 2016

Styling of the input placeholder is done by setting appropriate color etc. values of a pseudo-element. The name of the pseudo-element varies from one browser family to another. Until this becomes part of the CSS specifications, we'll have to do it like the below code snippet.

// Firefox
&::-moz-placeholder {
  color: #f00;
  opacity: 1; // Override Firefox's unusual default opacity; see

// Internet Explorer 10+
&:-ms-input-placeholder { color: #f00; }

// Safari and Chrome
&::-webkit-input-placeholder  { color: #f00; }