Styling HTML5 Placeholder

mixin.scss

/*******************************************************************************
* Placehoder Styling
*******************************************************************************/
@mixin placeholder {
  &::-webkit-input-placeholder { @content; }
  &:-moz-placeholder           { @content; } // Firefox 18-
  &::-moz-placeholder          { @content; } // Firefox 19+
  &:-ms-input-placeholder      { @content; }
}


/* Verwendung */
input {
  @include placeholder {
    color: red;
  }
}

style.css

/*
Source: http://martinwolf.org/2012/10/24/snippet-styling-html5-placeholder/
Source: http://css-tricks.com/snippets/css/style-placeholder-text/
*/

.my-input::-webkit-input-placeholder {
    color: #555;
}

.my-input:-moz-placeholder { /* Firefox 18- */
   color: #555;  
}

.my-input::-moz-placeholder { /* Firefox 19+*/
    color: #555;
}

.my-input:-ms-input-placeholder {
    color: #555;
}