Forms represent a huge part of our live on the web. So even small enhancement features help us improve the user experience. The ::input-placeholder gives us a way to style the placeholder text.
For those who don’t know, placeholder pseudo-element is a new HTML5 feature for displaying a text and provides a hint to the user on how to fill out the input field.
 

Let’s see an example

We want to change the color of the placeholder text for the following input field.

<input type="text" placeholder="I am an example">

 
We will then create a CSS rule using the ::input-placeholder pseudo-element.

input::-webkit-input-placeholder {  // (Chrome/Safari/Opera)
  color: #3498DC;
}
input:-moz-placeholder {  // Firefox 18 and below
  color: #3498DC;
}
input::-moz-placeholder {  // Firefox 19
  color: #3498DC;
}
input:-ms-input-placeholder {  // IE
  color: #3498DC;
}
input::-ms-input-placeholder {  // Edge
  color: #3498DC;
}

Important Notes:

Not all the CSS properties can be used with ::-input-placeholder. Only some of them are supported and among them the most useful are:

color
font-size
font-style
font-weight
letter-spacing
line-height
padding
text-align
text-decoration

 
However remember that placeholder styles will not resize an input field and will not affect its box model. And if that was not enough this functionality is not standardized. That means that every browser has a different idea on how it should work.