Placeholder Shown

Type: Mixin

@include placeholder-shown();

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

Placeholder Shown Sass mixin helps you to style <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 will also go away.

Github Source Code

Examples

Simply call the mixin and write your style rules.

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

//CSS Output
input:placeholder-shown {
  background-color: yellow;
}

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

@include placeholder-shown{
  background-color: yellow;
}

//CSS Output
:placeholder-shown {
  background-color: yellow;
}