CSS – Change Placeholder Text Color of Input field

In this tutorial, you get a standard CSS code to change the placeholder text color of the input field. I will explain a pseudo-element :: placeholder  that is frequently used to design a placeholder text with different style properties. So, read all the given points carefully.

Change Placeholder Color Using CSS ::placeholder

As you know that the default color of the placeholder is shown light gray in all browsers. But if you need to change it’s default color to another color then you will have to use the CSS  ::placeholder selector. So, You need to know about it in detail. Now, Let’s understand it through the following steps.

Learn more –

Auto Resize Textarea Height Using Javascript

Count Textarea Characters Using Javascript

What is :: Placeholder

The :: placeholder is introduced as a pseudo-element selector in CSS.

The :: placeholder is mainly used to add additional style properties to the input field.

You can change anything like placeholder text color, font size, font style, & more using  the :: placeholder

:: Placeholder Syntax

The :: placeholder has different syntaxes based on different web browser support.

Main Syntax 

selector::placeholder {
 propery_1 : value_1;
 propery_2 : value_2;
 --------  : --------
 property_n: value_n;
}

Syntax for firebox

This syntax will support the only firebox

selector::-moz-placeholder {
 propery_1 : value_1;
 propery_2 : value_2;
 --------  : --------
 property_n: value_n;
}

Syntax for chrome, Opera, Safari

This syntax will support  chrome, opera & safari

selector::-webkit-input-placeholder {
 propery_1 : value_1;
 propery_2 : value_2;
 --------  : --------
 property_n: value_n;
}

Syntax for Internet Explorer

This syntax will support the only internet explorer

selector:-ms-input-placeholder {
 propery_1 : value_1;
 propery_2 : value_2;
 --------  : --------
 property_n: value_n;
}

Syntax for Microsoft Edge

This syntax will support the only Microsoft edge

selector::-ms-input-placeholder {
 propery_1 : value_1;
 propery_2 : value_2;
 --------  : --------
 property_n: value_n;
}

Note –

  • You must declare all the above syntax for changing the placeholder text color.
  • You can declare the  ::placeholder without selector name if you have to change the default placeholder property of all input fields.

:: Placeholder example

In this example, I have declared  ::placeholder without selector name for all the input fields.

::placeholder{
 color:#ff0505;
 font-size:20px;
 font-weight:bold;
}
::-moz-placeholder {
 color:#ff0505;
 font-size:20px;
 font-weight:bold;
}
:-webkit-input-placeholder{
 color:#ff0505;
 font-size:20px;
 font-weight:bold;
}
:-ms-input-placeholder {
 color:#ff0505;
 font-size:20px;
 font-weight:bold;
}
::-ms-input-placeholder{
 color:#ff0505;
 font-size:20px;
 font-weight:bold;
}

Change Placeholder Color on Specific Browser with CSS

If you need to display placeholder text with a different color in a different web browser, then you will have to learn the following steps –

1. Change Placeholder color in Chrome, Opera, Safari

This CSS code will show the blue placeholder text in chrome, opera & safari browser

::-webkit-input-placeholder { 
color:blue;
}

2. Change Placeholder Color in Firebox

This CSS code will show the red placeholder text in the firebox browser

::-moz-placeholder { 
 color:red;
 }

3. Change Placeholder color in Internet Explorer

This CSS code will show the green placeholder text in the internet explorer browser

:-ms-input-placeholder {
 color:green;
 }

4. Change Placeholder Color in Microsft Edge

This CSS code will show the yellow placeholder text in the Microsoft Edge Browser

::-ms-input-placeholder { 
 color:yellow;
}

Change Placeholder Color on specific Input Filed with CSS

You can change the placeholder color on a specific input field. So, Let’s understand how to do it.

1. Change Placeholder color of Text Input Field

This CSS code will make the yellow placeholder  of the text input field

input[type='text']::placeholder{
color:yellow;
}
input[type='text']::-moz-placeholder{
color:yellow;
}
input[type='text']::-webkit-input-placeholder{
color:yellow;
}
input[type='text']::-ms-input-placeholder{
color:yellow;
}
input[type='text']:-ms-input-placeholder{
color:yellow;
}

2. Change Placeholder color of  Email Input Field

This CSS code will make the green placeholder  of the Email input field

input[type='email']::placeholder{
color:green;
}
input[type='email']::-moz-placeholder{
color:green;
}
input[type='email']::-webkit-input-placeholder{
color:green;
}
input[type='email']::-ms-input-placeholder{
color:green;
}
input[type='email']:-ms-input-placeholder{
color:green;
}

3. Change Placeholder color of Password Input Field

This CSS code will make the red placeholder of the password input field

input[type='password']::placeholder{
color:red;
}
input[type='password']::-moz-placeholder{
color:red;
}
input[type='password']::-webkit-input-placeholder{
color:red;
}
input[type='password']::-ms-input-placeholder{
color:red;
}
input[type='password']:-ms-input-placeholder{
color:red;
}

4. Change Placeholder color of Textarea Input Field

This CSS code will make the blue placeholder of the Textarea input field.

textarea::placeholder{
color:blue;
}
textarea::-moz-placeholder{
color:blue;
}
textarea::-webkit-input-placeholder{
color:blue;
}
textarea::-ms-input-placeholder{
color:blue;
}
textarea:-ms-input-placeholder{
color:blue;
}

How to Change Placeholder Color Using CSS

You will have to configure the following steps to change the placeholder color –

1. Create Input Field with Placeholder using HTML

First of all, Create text & Textarea input fields with a placeholder  using the following HTML code

<input type="text" placeholder="Enter your Title">
<textarea placeholder="Enter Your Description"

2. Change Placeholder Color using CSS

After that, use the following CSS code to change the placeholder color of the text & Textarea input field.

::placeholder{
 color:#ff0505;
}
::-moz-placeholder{
 color:#ff0505;
}
::-webkit-input-placeholder{
color:#ff0505;
}
::-ms-input-placeholder{
 color:#ff0505;
}
:-ms-input-placeholder{
 color:#ff0505;
}

 

Categories CSS

Leave a Comment