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
}

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 *