.ph(@color: #ccc) {
	input::-webkit-input-placeholder { color: @color; }
	input:-moz-placeholder { color: @color; }
	textarea::-webkit-input-placeholder { color: @color; }
	textarea:-moz-placeholder { color: @color; }

I was working on styling some form elements tonight for a project, and needed to style my HTML5 placeholders differently then my input values, so they looked a bit differently when the user entered the code. Doesn’t look like the spec on this is even close to finalized, so I used some browser specific prepends.

I was working working with Less, an awesome tool for dynamic CSS; If you haven’t tried it, you should give it, or SASS, a go.

Anywho, I decided to write a mixin that I could user over and over again if needed, and the above is it. You would call the mixin like so, if you wanted the placeholders to all be black:


You could obviously replace the color style with whatever you would need, but this worked for me!