Change HTML5 placeholder color with CSS for input & textarea

It’s the code snippet to change HTML5 placeholder color with CSS which are used in form input and textarea fields. The explanation and uses notes are as below:

  • WebKit and Blink browsers (Safari, Google Chrome, Opera 15+) 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 is using a pseudo-class: :-ms-input-placeholder.
  • Opera up to version 12 and IE up to version 9 do not support any CSS selector for placeholders.
  • Firefox’s placeholder appears to be defaulting with a reduced opacity, so we need to use opacity: 1 here.
  • Most importantly, don’t mix all them into one group since one invalid selector in a group makes the whole group invalid. So make a separate rule for every selector.

And your HTML inputs are:


You Might Interested In


    1. Amit Sonkhiya says:

      These CSS rules are working at my end. Please check browser compatibility as mentioned above and give me url of the page so I can have a look


Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.