Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Using CSS :placeholder-shown to Customize Styles for Empty Text Input
The CSS :placeholder-shown pseudo-class is used to style input elements when they are displaying placeholder text. This pseudo-class allows you to customize the appearance of empty text fields that show placeholder hints to users.
Syntax
input:placeholder-shown {
/* CSS properties */
}
Method 1: Setting Border Color
You can change the border color of input fields when they display placeholder text using the border-color property −
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
margin: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
input:placeholder-shown {
border-color: dodgerblue;
}
input:nth-of-type(even):placeholder-shown {
border-color: olivedrab;
}
</style>
</head>
<body>
<input type="text" placeholder="Blue border when empty">
<input type="email" placeholder="Green border when empty">
</body>
</html>
Two input fields appear with placeholder text. The first input has a blue border while showing placeholder text, and the second input has a green border when displaying its placeholder.
Method 2: Setting Background Color
You can apply background styling to input fields with placeholder text using the background property −
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 12px;
margin: 15px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
width: 200px;
}
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
</style>
</head>
<body>
<input type="email" placeholder="Enter your email">
<input type="text">
</body>
</html>
Two input fields appear. The first input with placeholder text has an orange border and powder blue background. The second input without placeholder text maintains its default styling.
Method 3: Transforming Placeholder Text
You can transform the appearance of placeholder text using the text-transform property −
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 12px;
margin: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
width: 250px;
}
input:placeholder-shown {
border-color: blue;
text-transform: uppercase;
}
</style>
</head>
<body>
<h3>Registration Form</h3>
<input type="email" placeholder="enter email address">
<input type="password" placeholder="enter password">
</body>
</html>
A registration form appears with two input fields. The placeholder text in both fields is displayed in uppercase letters, and the fields have blue borders when showing placeholder text.
Method 4: Adjusting Letter Spacing
You can modify the spacing between characters in placeholder text using the letter-spacing property −
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 12px;
margin: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
width: 300px;
}
input:placeholder-shown {
letter-spacing: 4px;
border-color: purple;
}
</style>
</head>
<body>
<h3>User Registration</h3>
<input type="email" placeholder="Email Address">
<input type="password" placeholder="Password">
</body>
</html>
A registration form displays with two input fields. The placeholder text in both fields has increased letter spacing (4px between characters) and purple borders when showing placeholder text.
Conclusion
The :placeholder-shown pseudo-class provides a powerful way to style input fields based on their placeholder state. This allows for better user experience by providing visual cues when fields are empty and awaiting user input.
410 Views
