Placeholder

Description

Mixin to style placeholder text cross browser.

SCSS Usage

@include placeholder { @content }

And so, in SCSS:

_component.scss
input[type=text] {
  color: #000;

  @include placeholder {
    color: #ccc;
  }
}

Output

app.css
input[type=text] {
  color: #000;
}
input[type=text]::-webkit-input-placeholder {
  color: #ccc;
}
input[type=text]:-moz-placeholder {
  color: #ccc;
}
input[type=text]::-moz-placeholder {
  color: #ccc;
}
input[type=text]:-ms-input-placeholder {
  color: #ccc;
}