DEV Community

loading...
Cover image for Difference between :placeholder-shown and ::placeholder in CSS

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

sandra_lewis profile image Sandra Lewis ・1 min read

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!

Discussion (9)

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Nice! Thanks for writing.

Collapse
sandra_lewis profile image
Sandra Lewis Author

Thank you! Always a pleasure

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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

Collapse
sandra_lewis profile image
Sandra Lewis Author

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

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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 Author

Thank you so much!

Collapse
xantosromero profile image
Santos Romero

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

Collapse
sandra_lewis profile image
Sandra Lewis Author

Anytime 😊
Thanks for reading!

Forem Open with the Forem app