Web Designing, Web Development, Website Design, Website Development, SEO

HTML Placeholder text color change using css

Refer : http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css

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

• WebKit and Blink (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.

IE up to version 9 and Opera up to version 12 do not support any CSS selector for placeholders.

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

following will style both textarea and textbox

*::-webkit-input-placeholder {
  color: red;
}
*:-moz-placeholder {
  color: red;
}
*:-ms-input-placeholder { /* IE10+ */
  color: red;
}