How to Change HTML5 input’s placeholder color with CSS

The placeholder attribute specifies a short hint that describes the expected value of an input field. The placeholder is used to specify a value of an input field unless user input value. It disappears as user input value.

Styling an input’s placeholder color using CSS:

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

  • WebKit, Blink (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
  • 2017: Most modern browsers support the simple pseudo-element
    ::placeholder

CSS

Below is the following code you can use:

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

<input placeholder="Please input correct data!">

 

Comments

Be the first to comment