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; }
Code language: CSS (css)


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; } }
Code language: CSS (css)

About Ricard Torres

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

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> if you need to.