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; }


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; } }

Leave a Reply

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