How to Change HTML input placeholder

This post will describe how to change the color in input text html

Demo:

Snippet:

HTML

<input id="demo-input" type="text" placeholder="My awesome placeholder" />

CSS

#demo-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: magenta;
    opacity: 1; /* Firefox */
}

#demo-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: magenta;
}

#demo-input::-ms-input-placeholder { /* Microsoft Edge */
    color: magenta;
}

Code explanation

The pseudo element ::placeholder is the key in this example, it needs to be used for each .class, #id or custom selector in order to change properly the placeholder attribute text styles.

Thanks for reading this post hope it helps you a bit to understand more about placeholder styles. Have a blessed day!

Jay