How To Style Placeholder Text for Inputs Using CSS3

With the new HTML attributes added to text inputs in HTML5, there have been few ways to style some of the new features such as the placeholder attribute added to input text fields.

In this tutorial, I’ll show you a very easy way to style the placeholder text inside of text input fields.

This will change the color of the placeholder text inside of the input from the normal, dull gray to a blue text color instead.

[CSS]
::-webkit-input-placeholder { /* Chrome/Safari */
color: #1E8CBE;
}

:-moz-placeholder { /* Firefox < 18 */ color: #1E8CBE; } ::-moz-placeholder { /* Firefox 19+ */ color: #1E8CBE; } :-ms-input-placeholder { /* IE 9+ */ color: #1E8CBE; } [/CSS] You'll notice that I placed each selector on it's own separate line. The reason you want to do this is because certain browsers will ignore the entire line all together if it doesn't recognize any of the selectors in a comma-seperated string selector, thus causing the entire selector string to not be recognized (even if it includes one of those selectors to be valid for that browser).

Leave a Reply

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