Using CSS :placeholder-shown to Customize Styles for Empty Text Input

CSS Web Development Front End Technology

To customize the style for the input textbox having a placeholder, we use the :placeholder-shown pseudo-class of CSS.

Example

The following examples illustrate CSS :placeholder-shown pseudo-class.

<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
   border-color: dodgerblue;
}
input:nth-of-type(even):placeholder-shown {
   border-color: olivedrab;
}
</style>
</head>
<body>
<input type="text" placeholder="dodgerblue">
<input type="email" placeholder="olivedrab">
</body>
</html>

Output

This will produce the following result −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
   border-color: orange;
   background: powderblue;
}
</style>
</head>
<body>
<input type="radio" checked>
<input type="email" placeholder="orange">
<input type="text">
</body>
</html>

Output

This will produce the following result −

AmitDiwan

Published on 12-Mar-2021 10:54:47

Previous Page Print Page