Change the Text Color of the Form Input Placeholder
Change the text color of the form input placeholder. The default color of the placeholder text of an input element can be changed using the ::placeholder pseudo-element.
This could be useful if you have a color theme and want your placeholder text to match the theme. The font color for text the user enters into the input box is styled separately. This is just for styling the placeholder text, which will disappear as soon as you start typing.
Method 1. All input placeholders
CSS
/* Modern browsers */
::placeholder {color:#26d;}
/* older browsers */
::-webkit-input-placeholder {color:#26d;}
::-moz-placeholder {color:#26d;}
:-ms-input-placeholder {color:#26d;}
:-moz-placeholder {color:#26d;}
::placeholder {color:#26d;}
HTML
<input placeholder="This is where the placeholder text goes." />
Example 1:
Type something in the text box. The placeholder text will disappear as soon as you begin typing. Use placeholder text to suggest or provide examples for input. The default placeholder text is black. Using the CSS above it can be styled to any color.
Method 2. Specific input placeholders using id or class
If you want to have an individual or several different placeholder colors, style as shown below.
CSS
/* Style for individual or several input placeholder text colors */
/* Add the id or class as shown */
#redplaceholder::placeholder {color:red;}
#redplaceholder::-webkit-input-placeholder {color:red;}
#redplaceholder::-moz-placeholder {color:red;}
#redplaceholder:-ms-input-placeholder {color:red;}
#redplaceholder:-moz-placeholder {color:red;}
#redplaceholder::placeholder {color:red;}
HTML
<input id="redplaceholder" placeholder="This is where the placeholder text goes." />