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; } 

:placeholder-shown

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
Selectors Level 4 # placeholder

See also

The ::placeholder pseudo-element styles the placeholder itself. Related HTML elements: <input>, <textarea> HTML forms Select your preferred language English (US)DeutschEspañolFrançais日本語Русский中文 (简体) Change language