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)
Yes (10)
Yes (15)
Mobile
Yes (2.1)
Yes (33)
Yes (4.3)
Yes (12)
Yes (10)
Yes (24)
For future browser support information, also check out caniuse.com (Placeholder pseudo-class).
# Usage statistics (Alexa Top 1,250,000 sites)
Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.
Please wait a moment, the comments start loading now...