Day 19: the placeholder-shown pseudo-class

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>

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. 🙂


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

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>

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. :)


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-10-20T09:38:54+00:00) Day 19: the placeholder-shown pseudo-class. Retrieved from https://www.scien.cx/2022/10/20/day-19-the-placeholder-shown-pseudo-class/

MLA
" » Day 19: the placeholder-shown pseudo-class." Manuel Matuzović | Sciencx - Thursday October 20, 2022, https://www.scien.cx/2022/10/20/day-19-the-placeholder-shown-pseudo-class/
HARVARD
Manuel Matuzović | Sciencx Thursday October 20, 2022 » Day 19: the placeholder-shown pseudo-class., viewed ,<https://www.scien.cx/2022/10/20/day-19-the-placeholder-shown-pseudo-class/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 19: the placeholder-shown pseudo-class. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/20/day-19-the-placeholder-shown-pseudo-class/
CHICAGO
" » Day 19: the placeholder-shown pseudo-class." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/20/day-19-the-placeholder-shown-pseudo-class/
IEEE
" » Day 19: the placeholder-shown pseudo-class." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/20/day-19-the-placeholder-shown-pseudo-class/. [Accessed: ]
rf:citation
» Day 19: the placeholder-shown pseudo-class | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/20/day-19-the-placeholder-shown-pseudo-class/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts