How to change placeholder color

Learn how to use CSS to change the color of placeholder attributes.

Use an input element and add placeholder Attribute:

<input type="text" placeholder="A red placeholder text..">

The placeholder text is usually gray in most browsers. To change this setting, please use ::placeholder selector to set the placeholder style.

Please note that Firefox adds a lower opacity to placeholders, so we use opacity: 1 To solve this problem.

::placeholder {
  color: red;
  opacity: 1; /* Firefox */
{}
::-ms-input-placeholder { /* Edge 12 -18 */
  color: red;
{}

Treasure Box