<pre class="brush: css notranslate"><code><span class="token comment">/ Selects any element with an active placeholder /</span> <span class="token selector">:placeholder-shown</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid silver<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>

: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.

<input placeholder="Type something here!"> 

input {   border: 1px solid black;   padding: 3px; }  input:placeholder-shown {   border-color: teal;   color: purple;   font-style: italic; } 

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.

<input id="input1" placeholder="Name, Rank, and Serial Number"> <br><br> <input id="input2" placeholder="Name, Rank, and Serial Number"> 

#input2:placeholder-shown {   text-overflow: ellipsis; } 

Customized input field

The following example highlights the Branch and ID code fields with a custom style.

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

input {   background-color: #E8E8E8;   color: black; }  input.studentid:placeholder-shown {   background-color: yellow;   color: red;   font-style: italic; } 

Specifications

See also