Change input placeholder text color on your website using CSS

In most browsers, the default placeholder text shows translucent or light gray color. 

Example of a default placeholder text on input field

You can change this, by using ::placeholderselector. The pseudo-element::placeholderrepresents the placeholder text in aninputor textareaelement.

CSS rule to change placeholder color

::placeholder {
   color: red;
}

Here the selector ::placeholder defines value for color property. Now the default text color changed to red.

Different ways to change input placeholder color

1: Do it for the whole placeholder on your website

You can alter placeholder text color by implementing ::placeholder pseudo-element in your stylesheet. Define a text color of it, and it will work perfectly. But you can have difficulties dealing with different browsers.

HTML:

<input class="form-control" placeholder="Write something">

CSS:

::placeholder {
   color: #02ad83;
}

Though the code above supports all modern browsers, you can specify it for a particular browser in case of rare issues. You have to separate rules for each browser. Otherwise, the whole group will be ignored by all browsers. You need to include the different vendor prefixes in order to support as many browsers as possible.

For Safari and Chrome

::-webkit-input-placeholder { 
    color: #02ad83;
}

For Microsoft Edge

::-ms-input-placeholder {
   color: #02ad83;
}

For Mozilla Firefox (v.19+)

::-moz-placeholder { 
   color: #02ad83;
opacity: 1;
}

For Mozilla Firefox (v.4-18)

:-moz-placeholder { 
   color: #02ad83;
opacity: 1;
}

For Internet Explorer

:-ms-input-placeholder { 
   color: #02ad83;
}

Note: Firefox adds a lower opacity to the placeholder, so you should use opacity property to fix this. There is no need to use opacity for any other browser.

2: Change placeholder color for a specific element

If you define pseudo-element like implemented code above, then it will affect the whole placeholders on your website. You can specify it for a particular element by defining it before the pseudo-element. 

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #02ad83;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #02ad83;
}

But this code also affects all your input and textarea element. To escape this situation you can use the following method. 

3: Define a class and use it anywhere you only want 

Use class name just before the pseudo-element instead of HTML element. Mention it for any placeholder wherever you want. 

.ClassName::-webkit-input-placeholder {
  color: #02ad83;
}

There are more different ways to change input placeholder text color, but I hope the given solutions are enough for you.