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
Using CSS :placeholder-shown to Customize Styles for Empty Text Input
To customize the style for the input textbox having a placeholder, we use the :placeholder-shown pseudo-class of CSS. Placeholder text is a hint for the user to understand what is to be typed in the input text field.
The following examples illustrate CSS :placeholder-shown pseudo-class.
Set the border for the text field
The border for the text field is set using the border-color property. Place it inside the placeholder-shown pseudo-class as shown below −
input:placeholder-shown {
border-color: dodgerblue;
}
Example
Let us see the example −
<!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>
Set the background color for the text field
The background color for the text field is set using the background property. Place it inside the placeholder-shown pseudo-class as shown below −
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
</style>
</head>
<body>
<input type="email" placeholder="Enter your email-id">
<input type="text">
</body>
</html>
Transform the placeholder text
The text-transform property is used to transform the placeholder text on a web page. It can be transformed to capitalize, uppercase, lowercase, etc. We have changed the placeholder text to uppercase.
Place it inside the placeholder-shown pseudo-class as shown below −
input:placeholder-shown {
border-color: blue;
text-transform: uppercase;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: blue;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Register</h1>
<input type="email" placeholder="Enter email-id">
<input type="text" placeholder="Enter password">
</body>
</html>
Transform the spacing between placeholder text characters
The letter-spacing property is used to set the space between the placeholder text characters. Place it inside the placeholder-shown pseudo-class as shown below −
input:placeholder-shown {
letter-spacing: 4px;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
letter-spacing: 4px;
}
</style>
</head>
<body>
<h1>Register</h1>
<input type="email" placeholder="Enter email-id">
<input type="text" placeholder="Enter password">
</body>
</html>
390 Views
