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 the color of the placeholder attribute with CSS?
To change the color of the placeholder attribute with CSS, use the ::placeholder. This will update the default color of a placeholder on a web page.
Create a Form and set the Input Fields
First, create a form using the <form> and set the input typeswith the placeholder attribute −
<input type="text" placeholder="Some placeholder text" />
Above, we have also set the placeholder −
placeholder="Some placeholder text"
Set the Placeholder Color
To set the color of the placeholder, use the color property, but set it using the ::placeholder pseudo element −
::placeholder {
color: rgb(70, 53, 167);
}
Change the Placeholder Color
In this example, we will change the default placeholder color −
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
input {
font-size: 40px;
font-weight: bold;
}
::placeholder {
color: rgb(70, 53, 167);
}
:-ms-input-placeholder {
color: rgb(66, 51, 155);
}
::-ms-input-placeholder {
color: rgb(122, 69, 182);
}
</style>
</head>
<body>
<h1>Placeholder color change example</h1>
<input type="text" placeholder="Some placeholder text" />
</body>
</html>
Arrange 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 −
Example
<!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>
Updated on: 16-Nov-2023
414 Views
Advertisements