Day 19: the placeholder-shown pseudo-class
source link: https://www.matuzo.at/blog/2022/100daysof-day19/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Day 19: the placeholder-shown pseudo-class
posted on October 20., 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="[email protected]">
</p>Name
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. :)
Further reading
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK