The :placeholder-shown Pseudo-class
A CSS pseudo-class is a selector that selects elements that are in a specific state.
The :placeholder-shown pseudo-class selects any <input> or <textarea> element that is currently displaying a placeholder text.
HTML
<input type="text" placeholder="Search university">
CSS
input[type=text] {
width: 100px;
}
:placeholder-shown {
text-overflow: ellipsis;
}
Result
The ::placeholder Pseudo-element
A CSS pseudo-element is a selector that lets you style a specific part of an element.
The ::placeholder pseudo-element can be used to style the placeholder text in an <input> or <textarea> element.
HTML
<input type="email" placeholder="Enter your email">
CSS
::placeholder {
color: red;
}
Result
Thanks for giving it a read.
Happy coding!
Top comments (9)
Nice! Thanks for writing.
Thank you! Always a pleasure
The difference is quite trivial once you understand the difference between pseudoclasses and pseudoelements 😁
I agree. But picking out an example like this helps beginners understand certain concepts easily.
Oh, definitely; I was just pointing out that it's one of these things that becomes very simple once you understand the underlying logic. It's also much easier to remember that way.
Nice Thank you for writing!
Thank you so much!
😲 thanks for sharing your knowledge. 👏🏻
Anytime 😊
Thanks for reading!