How to color the input placeholder with CSS

Did you know that you could change the placeholder color of an input text?

I didn't. If you try to use color: red it will only color the text you enter with the keyboard, not the placeholder.

Here's the CSS code to color the placeholder:


#element::-webkit-input-placeholder {
color: red;
}

#element:-moz-placeholder {
color: red;
}

#element::-moz-placeholder {
color: red;
}

#element:-ms-input-placeholder {
color: red;
}

LESS

If you're using LESS like I do, this one is for you:


.placeholder(@color) {
&:-moz-placeholder {
color: @color;
}
&::-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*