CSS pseudo-class - :placeholder-shown

CSS :placeholder-shown pseudo-class selects input elements that are currently showing placeholder text.

Syntax

:placeholder-shown {
   /* ... */
}

CSS :placeholder-shown - Basic Example

Following example demonstrates use of :placeholder-shown pseudo-class to apply special font and border styles to an input field when the placeholder text is shown −

<html>
<head>
<style>
   label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
   }
   input:placeholder-shown {
      border: 3px solid pink; 
      font-style: italic;
   }
</style>
</head>
<body>
   <label for="email">Email:</label>
   <input type="email" id="email" placeholder="Enter your email">
</body>
</html>

CSS :placeholder-shown - Overflowing text

Following example demonstrates use of :placeholder-shown pseudo-class to style input fields when their placeholder text overflows the input field due to its width −

<html>
<head>
<style>
   label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
   }
   input:placeholder-shown {
      text-overflow: ellipsis;
   }
</style>
</head>
<body>
   <label for="email">Email:</label>
   <input type="email" id="email" placeholder="Enter your email eg. example123@gmail.com">
</body>
</html>

CSS :placeholder-shown - Customized Input Field

Following example demonstrates use of :placeholder-shown pseudo-class to highlight the customer ID field with a custom style −

<html>
<head>
<style>
   label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
   }
   input#customerid:placeholder-shown {
      border: 3px solid red;
      font-style: normal;
      background-color: pink;
   }
   .submit-button {
      display: block;
      margin-top: 10px; 
   }
</style>
</head>
<body>
   <form>
      <label for="username">Username:</label>
      <input type="text" id="username" placeholder="Enter your username">

      <label for="useremail">Email Address:</label>
      <input type="email" id="useremail" placeholder="Enter your email">

      <label for="customerid">Customer ID:</label>
      <input type="text" id="customerid" placeholder="PT20156">
      
      <input type="submit" class="submit-button" value="Submit">
   </form>
</body>
</html>
Advertisements