Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Change Placeholder Color for Textboxes in CSS?
Use the ::placeholder pseudo-element, we can change the placeholder text color for textboxes. Also, use the :last-child pseudo class for the form input.
Syntax
The syntax of CSS ::placeholder pseudo-element is as follows −
::placeholder {
attribute: /*value*/
}
Default Placeholder
Example
Let us first see how a default placeholder color looks like −
<!DOCTYPE html>
<html>
<body>
<h1>Fill the form</h1>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Enter your firstname">
</form>
</body>
</html>
Placeholder With a Different Color
Now, we will see how to create a placeholder with a color different than the default −
Create a Form and set the Input Fields
First, create a form using the <form> and set the input types with the placeholder attribute −
<form> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Enter your firstname"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Enter your surname"> </form>
Above, we have also set the placeholder −
placeholder="Enter your firstname" placeholder="Enter your surname"
Set the Placeholder Color
To set the color of the placeholder, use the color property, but set it using the ::placeholder pseudo element −
<style>
input:last-child::placeholder {
color: cornflowerblue;
}
</style>
Example
Let us now see the example to implement the CSS :: placeholder pseudo-element −
<!DOCTYPE html>
<html>
<head>
<style>
input:last-child::placeholder {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1>Fill the form</h1>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Enter your firstname">
</form>
</body>
</html>
Align Input Fields With Flex and set the Placeholder
We will now set the input type and arrange them using flex. The placeholder will also be also set for the input fields. The default color is changed with the color property set with the ::placeholder −
<!DOCTYPE html>
<html>
<head>
<style>
input::placeholder {
color: fuchsia;
}
input {
margin: 2%;
width: 100%;
}
div {
display: flex;
flex-direction: column;
margin: 3%;
padding: 3%;
text-align: center;
align-items: center;
box-shadow: inset 0 0 30px brown;
}
button {
width: 40%;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="Normal placeholder" />
<input type="email" placeholder="somenone@somewhere.com" />
<button>dummy btn</button>
</div>
</body>
</html>
833 Views
