Do you use CSS ::placeholder Pseudo Element? Why?

Ask a question+

Is there anybody who use CSS ::placeholder Pseudo Element and why?

add comment

2 Answers


The ::placeholder selector selects form elements with placeholder text.
The ::placeholder pseudo element (or a pseudo class, in some cases, depending on the browser implementation) allows you to style the placeholder text of a form element. As in, the text set with the placeholder attribute:
The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.

You can style that text across most browsers with this smattering of vendor-prefixed selectors:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
::-moz-placeholder { /* Firefox 19+ */
  color: red;
:-ms-input-placeholder { /* IE 10+ */
  color: red;
:-moz-placeholder { /* Firefox 18- */
  color: red;
add comment

The ::placeholder pseudo-class is used to style the placeholder text of a form element.
Example of ::placeholder selector:
<!DOCTYPE html>

<title>Title of the document</title>
.container {
margin: 40px auto;
max-width: 700px;
background-color: #eeeeee;
padding: 20px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
section {
padding: 30px;
:scope {
background-color: #1c87c9;
<h2>:scope selector example</h2>
<div class="container">
Inside the scope.

Sara 80
add comment

Your Answer