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 displayin…



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

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">



CSS

::placeholder {
   color: red;
}



Result

Alt Text

Thanks for giving it a read.

Happy Coding!


Print Share Comment Cite Upload Translate
APA
Sandra Lewis | Sciencx (2024-03-28T10:21:32+00:00) » Difference between :placeholder-shown and ::placeholder in CSS. Retrieved from https://www.scien.cx/2021/05/09/difference-between-placeholder-shown-and-placeholder-in-css/.
MLA
" » Difference between :placeholder-shown and ::placeholder in CSS." Sandra Lewis | Sciencx - Sunday May 9, 2021, https://www.scien.cx/2021/05/09/difference-between-placeholder-shown-and-placeholder-in-css/
HARVARD
Sandra Lewis | Sciencx Sunday May 9, 2021 » Difference between :placeholder-shown and ::placeholder in CSS., viewed 2024-03-28T10:21:32+00:00,<https://www.scien.cx/2021/05/09/difference-between-placeholder-shown-and-placeholder-in-css/>
VANCOUVER
Sandra Lewis | Sciencx - » Difference between :placeholder-shown and ::placeholder in CSS. [Internet]. [Accessed 2024-03-28T10:21:32+00:00]. Available from: https://www.scien.cx/2021/05/09/difference-between-placeholder-shown-and-placeholder-in-css/
CHICAGO
" » Difference between :placeholder-shown and ::placeholder in CSS." Sandra Lewis | Sciencx - Accessed 2024-03-28T10:21:32+00:00. https://www.scien.cx/2021/05/09/difference-between-placeholder-shown-and-placeholder-in-css/
IEEE
" » Difference between :placeholder-shown and ::placeholder in CSS." Sandra Lewis | Sciencx [Online]. Available: https://www.scien.cx/2021/05/09/difference-between-placeholder-shown-and-placeholder-in-css/. [Accessed: 2024-03-28T10:21:32+00:00]
rf:citation
» Difference between :placeholder-shown and ::placeholder in CSS | Sandra Lewis | Sciencx | https://www.scien.cx/2021/05/09/difference-between-placeholder-shown-and-placeholder-in-css/ | 2024-03-28T10:21:32+00:00
https://github.com/addpipe/simple-recorderjs-demo