How TO - Change Placeholder Color
Learn how to change the color of the placeholder attribute with CSS.
Placeholder Color
Try it Yourself »Step 1) Add HTML:
Use an input element and add the placeholder attribute:
Example
<input type="text" placeholder="A red placeholder text..">
Step 2) Add CSS:
In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.
Example
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet
Explorer 10-11 */
color: red;
}
::-ms-input-placeholder
{ /* Microsoft Edge */
color: red;
}
Try it Yourself »
Tip: Read more about the ::placeholder selector in our CSS Reference: CSS ::placeholder Property.
