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.
😲 thanks for sharing your knowledge. 👏🏻
Anytime 😊
Thanks for reading!
Nice Thank you for writing!
Thank you so much!