CSS Selector Level 4 » Placeholder pseudo-class

The placeholder pseudo-class is going to match input elements which show a placeholder text.

Syntax

Copy
:placeholder-shown {
    /* declarations */
}

Example

Copy
:placeholder-shown {
    color: green;
}

::-webkit-input-placeholder {
    color: green;
}

::-moz-placeholder {
    color: green;  
}

:-ms-input-placeholder {
    color: green;  
}

In this example the placeholder text will be green; as soon as the input gets entered, the default color for text will be used.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1) Yes (4) Yes (5) Yes (12.0) Yes (10) Yes (15)
Mobile Yes (2.1) Yes (33) Yes (4.3) Yes (12.0) Yes (10) Yes (24)

Usage statistics (Alexa Top 1,250,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera