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
How to change the color of the placeholder attribute with CSS?
To change the color of the placeholder attribute with CSS, we use the ::placeholder pseudo-element which allows us to style the placeholder text that appears inside form input fields.
Syntax
selector::placeholder {
color: value;
}
Example: Changing Placeholder Color
Here is a complete example that demonstrates how to change the placeholder color using the ::placeholder pseudo-element −
<!DOCTYPE html>
<html>
<head>
<style>
.custom-input {
width: 300px;
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 5px;
margin: 10px 0;
}
.custom-input::placeholder {
color: #04af2f;
font-style: italic;
}
</style>
</head>
<body>
<h3>Changing Placeholder Color with CSS</h3>
<label for="name">Enter your name: </label><br>
<input type="text" id="name" class="custom-input"
placeholder="Your name here">
<label for="email">Enter your email: </label><br>
<input type="email" id="email" class="custom-input"
placeholder="example@domain.com">
</body>
</html>
Two styled input fields appear with green italic placeholder text. The first field shows "Your name here" and the second shows "example@domain.com" as placeholder text in green color (#04af2f).
Example: Different Colors for Different Inputs
You can also apply different placeholder colors to different input fields −
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 250px;
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
.green-placeholder::placeholder {
color: #28a745;
}
.blue-placeholder::placeholder {
color: #007bff;
}
.red-placeholder::placeholder {
color: #dc3545;
}
</style>
</head>
<body>
<h3>Multiple Placeholder Colors</h3>
<input type="text" class="green-placeholder"
placeholder="Green placeholder"><br>
<input type="text" class="blue-placeholder"
placeholder="Blue placeholder"><br>
<input type="text" class="red-placeholder"
placeholder="Red placeholder">
</body>
</html>
Three input fields appear with different colored placeholder text: green, blue, and red respectively.
Browser Support
The ::placeholder pseudo-element is supported in all modern browsers. For older browsers, you may need vendor prefixes like ::-webkit-input-placeholder for WebKit browsers.
Conclusion
The ::placeholder pseudo-element provides an easy way to customize placeholder text appearance. You can change not only the color but also other properties like font-style and opacity to match your design requirements.
4K+ Views
