WP-Mix

When displaying with HTML forms, most modern browsers display placeholder values for textarea and input fields. Once you’ve added placeholder attributes to your form fields, you can style their appearance via CSS.

Style placeholders with CSS

Here are the CSS rules required to style placeholders for the various browsers that support them:

/* Webkit */
::-webkit-input-placeholder {
	color: #777; font-style: italic;
	}
/* Firefox 4 - 18 */
:-moz-placeholder {
	color: #777; font-style: italic;
	}
/* Firefox 19+ */
::-moz-placeholder {
	color: #777; font-style: italic;
	}
/* IE 10+ */
:-ms-input-placeholder { 
	color: #777 !important; font-style: italic;  
	}

Of course the actual properties can be most anything you want; the ones used here are for example purposes only. Note that some properties require adding the !important declaration in order for them to be applied in good ’ol IE.

References

• Browser Support for Placeholder