DEV Community

Cover image for CSS :placeholder-shown
JS Bits Bill
JS Bits Bill

Posted on • Edited on

CSS :placeholder-shown

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

With this rule, we can do this type of styling that would otherwise require the aid of JavaScript:
placeholder-shown

<input name="food" placeholder=" " />
<label for="food">Favorite food</label>
Enter fullscreen mode Exit fullscreen mode
const input = document.querySelector('input');

input.addEventListener('focus', () => {
  // Add parent class to move label above input
});

input.addEventListener('blur', () => {
  // Check if input has value
  // Remove parent class to reset label
});
Enter fullscreen mode Exit fullscreen mode

But instead of all this overhead, we can leverage the :focus and :placeholder-shown CSS rules:

input:focus + label,
input:not(:placeholder-shown) + label {
  top: 14px;
  left: 6px;
  font-size: 12px;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

Here we check if the input has focus OR if it does not have the placeholder shown (meaning there is a text value). If either of these states apply, we have the label float to the top left.

A hell of a lot easier than JS event handlers! 😉

Here's a video using this in action:


CSS placeholder-shown


Check out more #JSBits at my blog, jsbits-yo.com. Or follow me on Twitter and TikTok.

Top comments (8)

Collapse
 
kwsim539 profile image
Kenneth Sim

Something here is incomplete. I tried to duplicate this in my Codepen but I'm not getting the same results. codepen.io/kwsim/pen/NWjPzrr

Collapse
 
js_bits_bill profile image
JS Bits Bill

Here's my original if it helps
stackblitz.com/edit/placeholder-shown

Collapse
 
kwsim539 profile image
Kenneth Sim

Yes. Thank you. This explains why what you have in your article was not working for me. Maybe you should add this link to your article.

Collapse
 
amir2mi profile image
Amir M. Mohamadi • Edited

It is totally doable with focus-within I think

Collapse
 
js_bits_bill profile image
JS Bits Bill

For the moving label, you'll still need :placeholder-shown to know whether there's text inside the input since you don't want the label to cover it after focusing out.

Collapse
 
amir2mi profile image
Amir M. Mohamadi

Yep thanks for writing about it, it is definitely a great feature!

Collapse
 
dracon profile image
Wolfgang Born

Look at the animation. When there is no placeholder showing but the word Pizza, the label stays at the top of the input.

Collapse
 
melfordd profile image
Melford Birakor

Cool features