How to change input placeholder text color using CSS?

By changing the input placeholder text color you can improve the overall view of your website, and it will increase user experience a lot.

Change input placeholder text color using CSS

Learn how to change the color of the placeholder attribute with 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

Method 1: Do it for the whole placeholder on your website
Method 2: Change placeholder color for a specific element
Method 3: Define a class and use it anywhere you only want 

Method 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.

Method 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. 

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;
}

Let me know by commenting below if this post is helpful to you or not.