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 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:
.ph(#000);
You could obviously replace the color style with whatever you would need, but this worked for me!
Comments (4)
Leave a Reply
Great! Just what I was looking for!
Link to commentCool! Glad I could help Matt. What kind of Less project are you working on?
Link to commentJust stumbled across this googling for “less textarea placeholder”. Hi there!
Link to commentCool! It’s nice to see I’ve got the SEO’s on something.
Link to comment