Difference between :placeholder-shown and ::placeholder in CSS

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!

Comments

[Vaibhav Khulbe]

Nice! Thanks for writing.

[Sandra Lewis]

Thank you! Always a pleasure

[𒊩Wii 💖💛💚💙💜💝💟]

The difference is quite trivial once you understand the difference between pseudoclasses and pseudoelements 😁

[Sandra Lewis]

I agree. But picking out an example like this helps beginners understand certain concepts easily.

[𒊩Wii 💖💛💚💙💜💝💟]

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.

[Abu Jaid]

Nice Thank you for writing!

[Sandra Lewis]

Thank you so much!

[Santos Romero]

😲 thanks for sharing your knowledge. 👏🏻

[Sandra Lewis]

Anytime 😊
Thanks for reading!