Set Input Placeholder color using CSS

To change Input Placeholder Color you need to set style for Pseudo Elements of CSS. Placeholder style CSS require different Pseudo Elements for different browsers.

See following example of CSS:

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

::placeholder { /* Most modern browsers support this now. */
   color:    #999999;
}

 

To change Placeholder style  for only difined class eg. "greybox":

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

.greybox::placeholder { /* Most modern browsers support this now. */
   color:    #999999;
}

 

 


Keywords: