Gerillass

v2.1.0

Placeholder

Type: Mixin
@include placeholder();

* You can call mixins with or without the gls- namespace (e.g. @include gls-placeholder();).

The Placeholder Sass mixin helps you style the placeholder text in an <input> or <textarea> element and generate cross-browser compatible CSS code.

Examples

Simply call the mixin and write your style rules.

Sass
.element{
  @include placeholder{
    color: red;
  }
}
CSS
.element::-webkit-input-placeholder {
  color: red;
}
.element::-moz-placeholder {
  color: red;
}
.element:-ms-input-placeholder {
  color: red;
}
.element:-moz-placeholder {
  color: red;
}
.element::placeholder {
  color: red;
}
Result

When you call the mixin at the root of your stylesheet, it targets all the <input> and <textarea> elements.

Sass
@include placeholder{
  color: orange;
}
CSS
&::-webkit-input-placeholder {
  color: orange;
}

&::-moz-placeholder {
  color: orange;
}

&:-ms-input-placeholder {
  color: orange;
}

&:-moz-placeholder {
  color: orange;
}

&::placeholder {
  color: orange;
}
Result