Form placeholders have a very specific syntax to style and it varies from browser to browser. This is compounded by the fact that you must specify each selector in its own group because browsers will invalidate a selector group if it doesn’t understand one of the selectors.

Taken together, in order to specify styles for placeholders, you need to duplicate your styling in 4 different blocks. You can get around this by using a mixin for the styles (you can’t use an @extend because that would merge the placeholder selectors into a single group) but you’re still having to repeat the placeholder selectors.

The Mixin

This mixin makes it easy to have a single line in your Sass for placeholder styling which is then output as multiple selector groups.

Example Usage

Very easy to call and use.