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 4 The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:placeholder-shown | Chrome Full support 47 | Edge Full support 79 | Firefox
Full support
51
| IE
Full support
10
| Opera Full support 34 | Safari Full support 9 | WebView Android Full support 47 | Chrome Android Full support 47 | Firefox Android
Full support
51
| 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