Change placeholder color CSS – cross browser

If you are not using labels in your html text fields you may need to add a placeholder for the text box. But changing placeholder color of an HTML input text field according to your web template need few  CSS lines to work in all major web browsers. You have to use different types of pseudo elements to get the job done.

Change placeholder color CSS - cross browser

.form-control::-webkit-input-placeholder { 
/* WebKit, Blink, Edge */
    color:    #a5a5a5;
}
.form-control:-moz-placeholder { 
/* Mozilla Firefox 4 to 18 */
   color:    #a5a5a5;
   opacity:  1;
}
.form-control::-moz-placeholder { 
/* Mozilla Firefox 19+ */
   color:    #a5a5a5;
   opacity:  1;
}
.form-control:-ms-input-placeholder { 
/* Internet Explorer 10-11 */
   color:    #a5a5a5;
}
.form-control::-ms-input-placeholder { 
/* Microsoft Edge */
   color:    #a5a5a5;
}
.form-control::placeholder { 
/* Most modern browsers support this now. */
   color:    #a5a5a5;
}

Leave a Reply