HTML5 Placeholder styling

By | January 8, 2014

I want to share css trick to change palceholder color. In this era HTML5 and CSS3 combination make developer life easier. Here you can see how to make place holder stylish.

How to define Placeholder?

It pretty simple. It’s a attributes of DOM element same like others.

<input type=”text” name=”firstname” placeholder=”Enter your first name” />

html5-placeholder-without-style

 

Default Placeholder has light gray color. Now just think how if it has some other color or match with your design. :)

For styling placeholder you just need to play with css. copy and paste below code in your page and see what happen.

<style>
::-webkit-input-placeholder {color:green;} /* webkit browser */
::-moz-placeholder {color:green;} /* mozilla firefox */
:-ms-input-placeholder {color:red;} /* ie */
</style>
<input type=”text” name=”firstname” placeholder=”Enter your first name” />

html5-placeholder-style

A full example:

 

Leave a Reply

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