Gerillass

v2.1.0

Placeholder Shown

Type: Mixin
@include placeholder-shown();

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

The Placeholder Shown Sass mixin helps you style an <input> or <textarea> element that is currently displaying placeholder text. As soon as the placeholder text disappears (that is, when the user starts typing), the applied style rules go away too.

Examples

Simply call the mixin and write your style rules.

Sass
input{
  @include placeholder-shown{
    background-color: yellow;
  }
}
CSS
input:placeholder-shown {
  background-color: yellow;
}
Result

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

Sass
@include placeholder-shown{
  background-color: yellow;
}
CSS
&:placeholder-shown {
  background-color: yellow;
}
Result