Styling Placeholder Text

Sometimes the light grey placeholder text needs to be styled to fit with your needs. All in all it is pretty easy with a couple of pseudo-elements and pseudo-classes.

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


::-webkit-input-placeholder { /* WebKit browsers */
    //Your Styles
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    //Your Styles
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    //Your Styles
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    //Your Styles
}

Want to become a better web developer?

Join over 20,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.

This post currently has no responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

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