How to Change HTML Input’s Placeholder Color with CSS

Typically, input textboxes and textarea display default text in grey font color. This text is also known as placeholder text. The placeholder color is the default color of text displayed in textboxes and textarea. Sometimes web developers need to change HTML input’s placeholder color with CSS. There are several ways to customize font color of HTML inputs. In this article, we will learn how to change placeholder color of HTML input textbox and textarea using plain CSS. You don’t need any JavaScript for this purpose.

How to Change HTML Input’s Placeholder Color

There are two ways to change HTML input’s placeholder color – using pseudo-element and using pseudo-class. Let us understand what is meant by pseudo element and pseudo class.

Pseudo element : Pseudo elements are keywords added to CSS selector that allow you to select and style specific parts of the HTML element, instead of styling the entire element. They are commonly used to style first letter of text in a paragraph or set placeholder color in input elements.

Pseudo class : Pseudo class is a special state of an HTML element that is often used to style the element. For example, you can use pseudo class to change the color of anchor link, on mouse hover.

Let us say you have the following HTML input text box.

<input type="text" placeholder="hello world">

When you run the web page with above code, it will most probably display the placeholder text in grey color. This is the default font color for placeholder text in most browsers. Let us look at the different ways to change this font color.

1. Most Modern Web Browsers

Most modern web browsers support a ::placeholder pseudo-element that allows you to select and style only the placeholder text of CSS input. Here is the code to change the HTML input’s placeholder color to red.

input::placeholder{
  color:red;
}

OR

::placeholder{
  color:red;
}

The above code will select and style only the text mentioned as placeholder attribute of input text and textarea.

Also, it will change the placeholder color of all text input on your web page, whether it is a textbox or textarea. If you only want to change color of specific text input, then you can customize your CSS selector. Here is an example to change placeholder color of input which accepts email address.

input[type="email"]::placeholder { 
        color: red; 
    } 

Here are code snippets to change placeholder colors for password input.

input[type="email"]::placeholder { 
        color: red; 
    } 

If you have a textrarea on your page, then you will need to use textarea tag in your CSS selector, instead of input. Let us say you have the following textarea.

<textarea id="my_text" placeholder="hello, good morning" >
</textarea>

Here is the CSS to change its placeholder font color.

textarea::placeholder{
  color:red;
}

2. Browser Specific Solution

The above solution should work in most Chrome, Firefox, Opera and Edge versions. However, if you are using older web browsers, or the above solution does not work on your web browser, then you can try a web browser specific solution.

Safari, Chrome, Opera 15+ use pseudo-element ::webkit-input-placeholder. Firefox versions 4 to 18 support pseudo-class :-moz-placeholder whereas Firefox 19+ support pseudo element ::-moz-placeholder. Internet explorer and Edge support pseudo element ::-ms-input-placeholder.

IE older than 9 and Opera older than version 12 do not support any placeholder selectors.

Here is a more browser-specific solution to support various web browsers.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    red;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    red;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    red;
}

If you want, you can also add ::placeholder selector’s styling, shown in previous solution, to the above code to make it more comprehensive. But please do not combine the above CSS selectors because if one selector does not work, then the rest in the group will also fail.

3. Element Specific Solution

If there are multiple input elements or textarea then you need to be more specific with your selectors otherwise all placeholder texts will be formatted unnecessarily. Here is an example to change placeholder text color for only text inputs.

input[type="text"]::placeholder {
    color: red;
}

OR

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

Here is an example to change color of placeholder text for input with id=my_text.

#my_text::placeholder {
    color: red;
}

Here is an example to change placeholder color of text inputs with class=text_input.

.text_input::placeholder {
    color: red;
}

Here is the code to change color of characters in password text box.

input[type="password"]::placeholder {
    color: red;
}

Just by changing the CSS element selector, you can tweak where you want the placeholder formatting to be applied. In the above examples, we have only used pseudo-element ::placeholder. But you can also use browser specific pseudo elements instead.

Important Note

Please note, this will not change the actual text color of input elements. For example, if you have changed the placeholder color to red then only the placeholder text will appear red. The moment you start typing in the HTML input, its color will automatically change to what you have set it to, or default black color. So if you also want to change the font color of input elements, you need to do that separately. If you want to change the actual font color of typed text in your input elements, then you need to add separate CSS rules for it. Here is the CSS code to change the actual font of input elements to CSS.

input[type='text']{
  color:red;
}

OR

textarea{
  color:red;
}

Conclusion

In this article, we have learnt several different ways to change the color of placeholder text in HTML text input as well as textarea. You can use any of these methods depending on your requirements. If your users use modern web browsers such as Edge, Chrome, Firefox, then you can use ::placeholder pseudo-element. If it is not supported by your web browser, then you can also try using pseudo-element ::webkit-input-placeholder (Safari, Chrome, Opera 15+), ::-moz-placeholder (Firefox) and ::-ms-input-placeholder (Internet explorer and Edge). You can also use a combination of both these approaches so that it is more comprehensive.

FAQ

1. Will it also change the font color of input elements?

No. It will only change the HTML input’s placeholder color. The moment you start typing input text, it will switch the font color of input text box or textarea. If you also want to change font color of actual user input, then you need to add separate CSS rules for it, as mentioned above.

2. Is it supported on all web browsers?

The ::placeholder pseudo-element is supported by most modern web browsers. If it is not working on your web browser, then you can try using use pseudo-element ::webkit-input-placeholder for Safari, Chrome, Opera 15+, ::-moz-placeholder for Firefox and ::-ms-input-placeholder for Internet explorer and Edge.

Also read:

How to Detect Click Outside Element in JavaScript
How to Know Which Radio Button is Selected in jQuery
How JavaScript Closures Work