Day 19: the placeholder-shown pseudo-class

posted on 20.10.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

You can use the :placeholder-shown pseudo-class to select input fields with a placeholder that haven't been filled out yet.

input:placeholder-shown {
  outline: 5px solid blue;
}

<p>
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="your name…" value="Johanna">
</p>

<p>
  <label for="email">E-Mail</label>
  <input type="email" id="email" placeholder="name@domain.com">
</p>

Name

E-Mail

PS: Yeah, I know, that one has been around for quite a while already, but I started writing CSS 15 years ago. So anything that was published after 2015 is modern CSS for me. :)

See on CodePen

Day 19: the placeholder-shown pseudo-class

Further reading