Styling Placeholder Text

November 14, 2014

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 }