Widely available Supported across all major browsers. Safe to use in production.

:placeholder-shown

The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:placeholder-shown
47
79
51
9
47
9
non text types

Support on non-`type="text"` elements (such as `type="number"` or `type="time"`)
47
79
59
9
47
9
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (51)
Implementation note
  • Previously available under a different name: :-moz-placeholder (4)

Syntax

CSS 
input:placeholder-shown + label {
  transform: translateY(0);
  opacity: 0.5;
}
input:not(:placeholder-shown) + label {
  transform: translateY(-20px);
  font-size: 0.75rem;
}

Live demo

furo-tinglabel

CSS furo-tinglabel demo.

PreviewFullscreen

Input onlydecoration

CSS Input onlydecoration demo.

PreviewFullscreen

Submitbuttoncontrol

CSS Submitbuttoncontrol demo.

PreviewFullscreen

Use cases

  • Using :placeholder-shown

    The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links