The :placeholder-shown
CSS pseudo-class represents any <input>
or <textarea>
element that is currently displaying placeholder text.
/* Selects any element with an active placeholder */
:placeholder-shown {
border: 2px solid silver;
}
Syntax
:placeholder-shown
Examples
Basic example
This example applies special font and border styles when the placeholder is shown.
HTML
<input placeholder="Type something here!">
CSS
input {
border: 1px solid black;
padding: 3px;
}
input:placeholder-shown {
border-color: teal;
color: purple;
font-style: italic;
}
Result
Overflowing text
When form fields are too small, placeholder text can get cropped in an undesirable way. You can use the text-overflow
property to alter the way overflowing text is displayed.
HTML
<input id="input1" placeholder="Name, Rank, and Serial Number">
<br><br>
<input id="input2" placeholder="Name, Rank, and Serial Number">
CSS
#input2:placeholder-shown {
text-overflow: ellipsis;
}
Result
Customized input field
The following example highlights the Branch and ID code fields with a custom style.
HTML
<form id="test">
<p>
<label for="name">Enter Student Name:</label>
<input id="name" placeholder="Student Name"/>
</p>
<p>
<label for="branch">Enter Student Branch:</label>
<input id="branch" placeholder="Student Branch"/>
</p>
<p>
<label for="sid">Enter Student ID:</label>
<input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
</p>
<input type="submit"/>
</form>
CSS
input { background-color: #E8E8E8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of ':placeholder-shown' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:placeholder-shown
|
Chrome
Full support 47 |
Edge
Full support 79 |
Firefox Full support 51 Full support 51 No support 4 — 51 Alternate Name' Uses the non-standard name: |
IE Full support 10 Full support 10 Alternate Name' Uses the non-standard name: |
Opera
Full support 34 |
Safari
Full support 9 |
WebView Android
Full support 47 |
Chrome Android
Full support 47 |
Firefox Android Full support 51 Full support 51 No support 4 — 51 Alternate Name' Uses the non-standard name: |
Opera Android
Full support 34 |
Safari iOS
Full support 9 |
Samsung Internet Android
Full support 5.0 |
Support on non-type="text" elements (such as type="number" or type="time" )
|
Chrome
Full support 47 |
Edge
Full support 79 |
Firefox
Full support 59 |
IE
No support No |
Opera
Full support 34 |
Safari
Full support 9 |
WebView Android
Full support 47 |
Chrome Android
Full support 47 |
Firefox Android
Full support 59 |
Opera Android
Full support 34 |
Safari iOS
Full support 9 |
Samsung Internet Android
Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- Uses a non-standard name.'
- Uses a non-standard name.
See also
- The
::placeholder
pseudo-element styles the placeholder itself. - Related HTML elements:
<input>
,<textarea>
- HTML forms
:placeholder-shown by Mozilla Contributors is licensed under CC-BY-SA 2.5.