Today, We will play with some more interesting CSS style properties for HTML5 INPUT placeholder styling. Let’s explore, how to style placeholder text within INPUT elements with some unique CSS code. In previous articles, we have already covered some beautiful CSS effects on INPUT [type=button] and Input [type=text].

What is Placeholder?

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email, and password.  The placeholder attribute is new in HTML5.

Styling INPUT elements with the placeholder attribute is something you don’t need to do but could be just another one of those small details that sets your website apart from other websites.

Change input HTML5 placeholder color with CSS
There are three different ways of implementations: pseudo-elements, pseudo-classes, and nothing.

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.

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

Note: 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. For default formatting of all INPUTs, customized css code is following.

The CSS

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

 

Note: Be careful to avoid bad contrasts. Firefox’s placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.

HTML5 placeholder style can be appeared on Input on focus state. Try this, this should work :

input::-webkit-input-placeholder {
    color: #999;
}
input:focus::-webkit-input-placeholder {
    color: red;
}

/* Firefox < 19 */
input:-moz-placeholder {
    color: #999;
}
input:focus:-moz-placeholder {
    color: red;
}

/* Firefox > 19 */
input::-moz-placeholder {
    color: #999;
}
input:focus::-moz-placeholder {
    color: red;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: #999;
}
input:focus:-ms-input-placeholder {
    color: red;
}

IE uses the pseudo class :-ms-input-placeholder instead of a pseudo element ::-ms-placeholder. I Can’t test the focus behavior, because IE per default hides the placeholder on focus.

Enjoyed this Post?

If you enjoyed this article, feel free to share this tutorial with your friends. Thanks for reading!
view demo

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!