How to Change Placeholder Color

So what’s a placeholder color? More importantly, what’s a placeholder?

The placeholder attribute is a basically a hint that describes the expected value of an input field / textarea. The hint is displayed in the field before the user enters any value.

In order to change the placeholder’s font color, you need to use the ::placeholder pseudo element.

CSS

::-webkit-input-placeholder { /* For Chrome/Opera/Safari */
  color: #b67191; opacity: 1;
}
::-moz-placeholder { /* For Firefox 19+ */
  color: #b67191; opacity: 1;
}
:-ms-input-placeholder { /* For IE 10+ */
  color: #b67191; opacity: 1;
}
:-moz-placeholder { /* For Firefox 18- */
  color: #b67191; opacity: 1;
}

HTML

<input type="text" placeholder="This is an input field">
<textarea placeholder="This is a textarea"></textarea>

Output

*By default, Mozilla sets placeholders to less than 100%

How to add placeholder to Contact Form 7 Gravity Forms and Quform plugins

Contact Form 7

Gravity Forms

Quform