How to Change Placeholder Text Color in Form

Sometimes we face in a problem with Contact form’s field’s Placeholder color when develop different colors and types of contact forms. If we use html5 or Bootstrap default contact forms we get a default color of placeholder text. Sometimes it does not match with the template color or mock-up color. Then we try to change the color with the CSS code like input

{color:#EFEFEF;}

. But it does not change the color of placeholder text. It actually change the color of typing text into the field.

Now I’ll give the solution of the problem. We need to apply the CSS code like this,

/*Placeholder Colors*/
.form-control::-webkit-input-placeholder {
color:#fff;
}
.form-control:-moz-placeholder { /* Firefox 18- */
color:#fff;
}
.form-control::-moz-placeholder { /* Firefox 19+ */
color:#fff;
}
.form-control:-ms-input-placeholder {
color:#fff;
}

You can change the color code as you want and You do not have to use the same class . Use the class which you used in your input or textarea field .

Then the color code will work perfectly.

Have Fun