An awesome Sass Mixin for styling placeholders

Ah styling placeholders, something that should be pretty simple is made complex by the 4 (last time counted) browser prefixes you need to add.

Sass can really help abstract away a lot of this heavy lifting. I wanted to build a mixin that allows me to update specific placeholders, for example my header might have a solid background with transparent form fields – in this case I want my placeholders to be white.

Well without further ado here is what I have come up with (its pretty simple):

@mixin placeholder($color) {
  &::-webkit-input-placeholder {color: $color}
  &:-moz-placeholder           {color: $color}
  &::-moz-placeholder          {color: $color}
  &:-ms-input-placeholder      {color: $color}  
}

To use this mixin, just drop in the color you want and use it in the context that you want to style. For example to style the placeholders in the preheader you might have something like this:

.preheader input {
   @include placeholder(#fff)
}

That's it! Think you can make this mixin better? Leave a comment below.