DEV Community

Cover image for Difference Between :placeholder-shown and ::placeholder in CSS
Sandra Lewis
Sandra Lewis

Posted on • Edited on

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">
Enter fullscreen mode Exit fullscreen mode

CSS

input[type=text] {
  width: 100px;
}

:placeholder-shown {
   text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

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">
Enter fullscreen mode Exit fullscreen mode

CSS

::placeholder {
   color: red;
}
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

Thanks for giving it a read.

Happy coding!

Top comments (9)

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Nice! Thanks for writing.

Collapse
 
sandra_lewis profile image
Sandra Lewis

Thank you! Always a pleasure

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ

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

Collapse
 
sandra_lewis profile image
Sandra Lewis

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

Collapse
 
darkwiiplayer profile image
π’Ž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.

Collapse
 
abu profile image
Abu Jaid

Nice Thank you for writing!

Collapse
 
sandra_lewis profile image
Sandra Lewis

Thank you so much!

Collapse
 
xantosromero profile image
Santos Romero

😲 thanks for sharing your knowledge. πŸ‘πŸ»

Collapse
 
sandra_lewis profile image
Sandra Lewis

Anytime 😊
Thanks for reading!