The ::placeholder CSS pseudo-element represents the placeholder text in an
or element.

The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.

Tip: The default color of the placeholder text is light grey in most browsers.

  • WebKit (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder
  • Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). 
  • Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. 
  • Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder
  • April 2017: Most modern browsers support the simple pseudo-element ::placeholder
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #bababa;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #bababa;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #bababa;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #bababa;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #bababa;
}

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

Leave a Comment

Your email address will not be published. Required fields are marked *