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 Ricard Torres

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.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

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

*
*