HTML5 placeholder color with CSS

include script tags in HTML

Want to change the color of a placeholder of your input fields? Here is an example that helps you to change the color of a placeholder.

Basically, there are three different implementations i.e. 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.

Note: Internet Explorer 9 and lower versions does not support the placeholder attribute while Opera 12 and lower do not support any CSS selector for placeholders.

Here is the code for changing color of placeholders:

CSS:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:    #FF6550;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:    #FF6550;
opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:    #FF6550;
opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:    #FF6550;
}
HTML:
<input name="txt" placeholder="Looks colorful!">
<textarea placeholder="Looks colorful also!"></textarea>

html placeholder color

Note to remember that firefox’s placeholder appears to be defaulting with a reduced opacity, so we need to use opacity: 1 here.

You may like:  New html5 tips and techniques

Leave a Reply

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