Cross Browser HTML Input Placeholder color change using CSS with Example.

HTML5 Placeholder example

One of the features of HTML5 that was very quickly adapted by the developers around the globe and almost all the browsers developed since then, was “placeholder” attribute in input element. People stopped using javascript snippet in their code with onclick and onblur events.



Basically, placeholder attribute is used for displaying placeholder text in input fields, which fades away as soon as something is typed in the input box.

The placeholder-text is always faded (has opacity less than 1 = light in color) as compared to the original value text of input box. So, I was looking for a way to change the text-styling for the placeholder-text.

The latest ::input-placeholder CSS pseudo-element gives us a standards-compliant way to style placeholder text, regardless of an input field’s default styles. However most of the browsers have started to implement it but still it is preferred to use prefixed notations for each browser.

Implementation

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.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.
CSS selectors

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:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #909;
}

Usage notes

    Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
    Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
    Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
    Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:

 [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

References:

StackOverFlow