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
}

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

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 *

Current day month ye@r *