Placeholder

Type: Mixin

@include placeholder();

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

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

Github Source Code

Examples

Simply call the mixin and write your style rules.

.element{
  @include placeholder{
    color: red;
  }
}

//CSS Output
.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;
}

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

@include placeholder{
  color: orange;
}

//CSS Output
::-webkit-input-placeholder {
  color: orange;
}
::-moz-placeholder {
  color: orange;
}
:-ms-input-placeholder {
  color: orange;
}
:-moz-placeholder {
  color: orange;
}
::placeholder {
  color: orange;
}