Less Mixin for Styling HTML5 Placeholders

.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 work­ing on styling some form ele­ments tonight for a project, and needed to style my HTML5 place­hold­ers dif­fer­ently then my input val­ues, so they looked a bit dif­fer­ently when the user entered the code. Doesn’t look like the spec on this is even close to final­ized, so I used some browser spe­cific prepends.

I was work­ing work­ing with Less, an awe­some tool for dynamic CSS; If you haven’t tried it, you should give it, or SASS, a go.

Any­who, 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 place­hold­ers to all be black:

.ph(#000);

You could obvi­ously replace the color style with what­ever you would need, but this worked for me!