Styling the placeholder attribute in CSS requires no less that 4 vendor prefixed properties. This can be a pain to try and remember them. I wanted to create a mixin for our less library so that we could style it with a simple class.

However, the problem arose when I wanted to leave the mixin open to be able to pass in whatever I wanted - imagined it working much like a PHP function passing in an array:

Unfortunately, it didn't work as expected. I reached out for help on twitter and luckily, some friends came to the rescue. After much back and forth, (and with a little bit of help from Joao we came up with this solution:

This allows you to specify a color and then either bold or italic.This can be modified and extended, but for the near-future I can only see these being needed. If you want to just make it bold you can do the following:

input {
.placeholder(false, bold);
}

You can see it in action on Codepen. Suggestions and changes most welcome!