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)

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