Change HTML5 placeholder color with CSS for input & textarea

/* WebKit browsers */
::-webkit-input-placeholder { 
    color: #045FB4;
}

/* Mozilla Firefox 4 to 18 */
:-moz-placeholder { 
   color: #045FB4;
   opacity: 1;
}

/* Mozilla Firefox 19+ */
::-moz-placeholder { 
   color: #045FB4;
   opacity: 1;
}

/* Internet Explorer 10+ */
:-ms-input-placeholder { 
   color: #045FB4;
}

It’s the code snippet to change HTML5 placeholder color with CSS which are used in form input and textarea fields. The explanation and uses notes are as below:

• WebKit and Blink browsers (Safari, Google Chrome, Opera 15+) are using a pseudo-element: ::-webkit-input-placeholder.
• Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon).
• Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while.
• Internet Explorer 10 is using a pseudo-class: :-ms-input-placeholder.
• Opera up to version 12 and IE up to version 9 do not support any CSS selector for placeholders.
• Firefox’s placeholder appears to be defaulting with a reduced opacity, so we need to use opacity: 1 here.
• Most importantly, don’t mix all them into one group since one invalid selector in a group makes the whole group invalid. So make a separate rule for every selector.

And your HTML inputs are:

<input type="text" placeholder="Input text">
<textarea placeholder="Input content"></textarea>