How to Change Input Placeholder Color with CSS

Placeholder, as the name itself suggests, is some characters or strings which holds a place until the place is needed. That’s just the literal meaning of placeholder etymologically speaking. In web page development, input placeholders are present on input elements especially to describe what the input should be. These input placeholders are extensively present in forms. In this tutorial, we will be looking into several ways to change input placeholder text color with HTML and CSS

In the registration form below, the faded colored text within each input field Name, Birthday, class and Registration Code, these all are placholders each describing the content to be filled up in its respective field. Now you might have observed the difference in the color of the place holders and the heading REGISTRATION INFO. That difference is a clear indicator to any users without additional guides on what each texts are meant for. So, whenever you are adding placeholder, its color is an important factor to be considered in design aspects.

How To Change Input Placeholder Color with HTML and CSS

Now lets see how we can change the input placeholder text color using HTML and CSS. We will be looking into several approaches that can allow us to set color in input placeholder. Before that, Lets see how we can actually add placeholder in input field with a basic example.

<label><strong>Password:</strong></br></label>
<input type="text" placeholder="Must have at least 6 Character"/>

In the above HTML, we have a simple label and a text input field with a placeholder. That should produce the placeholder like below.

The default color, in most browser, is grey like the above picture. Sometimes we might want to customize this as per our design. So, Now lets learn about several ways to change input placeholder text color using CSS and HTML.

Changing the Input Placeholder Color with ::placeholder Selector

Input Placeholder behave differently on different browsers. So, if you want to have a consistent placeholder styling on every browsers we have to use vendor prefix while at the same time considering different effects on placeholder by different browsers.

We can use ::placeholder selector with various vendor prefix specifications to apply styles to input place holder. However this selector is non-standard as no official standard has been set for this styling effect.

Different Vendor Prefixed Selector

This ::placeholder selector for changing the color comes in various forms of implementation depending on the browser. Let’s see vendor specific form of this selector according to different browsers:

• :moz-placeholder — for Mozilla firefox 4 to 18
• ::moz-placeholder — for Mozilla firefox 19+ while previous implementation works just fine.
• ::webkit-input-placeholder — for WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge
• :-ms-input-placeholder — Internet Explorer 10 and 11
• IE 9 and lower versions doesn’t support the placeholder attribute
• Opera 12 and lower doesn’t support any CSS selectors for placeholders
• Most modern browsers, however supports simple ::placeholder pseudo-element

Okay with that known, Now we can use different placeholders each for different browsers. First of all lets create a simple text field in HTML.

<label>placeholder selector:</br></label>
<input type="text" placeholder="CSS ::placeholder selector " /

In the above HTML, I’ve just added a simple label and a placeholder value to a text input field. Now lets see how we can change the color of the placeholder for each different browsers. For that we will be using vendor prefix for different browsers.

*::-webkit-input-placeholder {
    color: Blue;
}

/* FireFox 4-18 */
*:-moz-placeholder {
    color: Blue;
    opacity: 1;
}

/* Firefox 19+ */
*::-moz-placeholder {
    color: Blue;
    opacity: 1;
}

 /* Internet Explorer 10+ */
*:-ms-input-placeholder {
    color: Blue;
}

/* Microsoft Edge */
*::-ms-input-placeholder {
    color: Blue;
}
 /*Most modern browser */
*::placeholder {
    color: Blue;
}

In the above CSS I have separately added styling for each different browser with their specific vendor prefix. You might have observed that in mozilla prefixed placeholder, I’ve opacity to 1. That’s because, the default placeholder effect on firefox has a reduced opacity.

Note: If any of the selector on the group of selectors (grouped by using comma (,) ) is invalid then all the selectors on the group will be invalid. So all those placeholder, since they have same styling, shouldn’t be grouped together.

Varying Placeholder Color for different input types

In the above example, the style applies to all placeholders of the page developed since I’ve used (*) universal selector. However if you prefer to use it different color for different input types then we can apply the CSS with proper selector. Let’s see a sample example.

<label>Text field:</br></label>
<input type="text" placeholder="CSS ::placeholder Text" />
<label>Email Field:</br></label>
<input type="email" placeholder="CSS ::placeholder Email " />

In the above HTML I have created two different types of input field one of type text and the next of type email. Now lets see how we can separately style our placeholder for each different browsers.

 /* modern browser */
input[type="text"]::placeholder {
    color: Blue;
}
input[type="email"]::placeholder {
    color:red ;
}

In the above CSS I have just added the varying styling to two different input supportable by modern browsers. You can add all other vendor prefix related selectors accordingly. Also not only with types of input field you can select each placeholder with several selectors with class and id as well.

Lets see the output of the above HTML and CSS

Using CSS Filters

We can use CSS filters to achieve some powerful visual effects. Effects like blur, grayscale, contrast, sepia etc. can be used to render different graphical effects on elements. Amazingly, this filters when applied to an input element styles everything, including the placeholder. However, this approach isn’t the recommended approach and I suggest not using filters just to style our placeholder. But since I am trying to compile several approaches to change the placeholder color, so that’s why I’ve included this in this tutorial. So Let’s see how css filters affects our input placeholder text color.

<label>CSS Filter:</br></label>
<input type="text" placeholder="CSS Filters Placeholder!! " />

In this above HTML code, I’ve created a label and an input text field with a simple placeholder. This renders a default placeholder on our text field. Now lets use CSS filter so see how it effects the placeholder color.

input {
  filter: sepia(100%) saturate(400%) grayscale(0) ;
}

With that set, lets see how it changed the placeholder color.

I’ve added some styling on label and input field to make it more presentable by alinging them to center to this tutorial. You can add your own style. For now, Just focus on how the filter has changed our input field including the colors of the placeholder.

Miscellaneous

A fair warning in this section that these approaches aren’t recommended ways to change placeholder colors. In fact the text in the input field are actual values rather than placeholder. That means if you submit the input field, then the set value will be submitted if not edited advertently by the user.

value with onfocus

<input type="text" 
    value="Value as placeholder" 
    style="color: red;" 
    onfocus="this.style.color='black'; 
    this.value='';" 
 />

Instead of placeholder text I have added text in value that means the actual value will already be present in the input field. So, submitting this input field without adding any input doesn’t submit an empty field but rather with the text in the value attribute. However when you click on the text field, the onfocus event gets triggered removing the value and and changing the color back to black which temporarily can ,therefore, behave as placeholder. But once you’ve entered the text field, the value gets completely removed thereby, leaving the text field without any placeholder.

Conditional value with onfocus and onblur

Well still not recommended and dangerous, but the disappearance of the so-presumed-placeholder on previous section could be remedied by the following HTML, if you are actually planning to use value as placeholder.

<input type="text" 
     value="Value as Placeholder" 
     style="color: red;"
     onfocus="if(!this.hasText)
         {this.style.color='black'; 
         this.value='';}" 
     onblur="if(!this.value)
         {this.style.color='red'; 
         this.value='Value as Placeholder'; 
         this.hasText=false;}
         else{this.hasText=true};" 
 />

In this above HTML, similar to previous section value has been used as placeholder with color set to red. When the input field is selected the conditional statement is used that sets back to empty value and black colored text only if the “hasText” is false which is set by the following onblur event. When the input field is not selected then again if the text doesn’t contain any value then original value with red color is set. This also sets the “hasText” to false. Thereby allowing onFocus event to re-empty the text field when selected.

Conclusion

In this tutorial, we’ve looked into several ways to change the color of placeholder. We’ve also looked into limitations of those approaches. Though as of now, there is no standard placeholder styling element. We can still make use of non-standard form as long as browsers support them. It may be frustrating enough to add vendor prefix for different browsers. But modern browsers are tending towards supporting more common version of the placeholder selector.