LAST UPDATED: AUGUST 5, 2021
How to change input field or textarea placeholder text color using CSS?
The placeholder is used to display some text within the input field to textarea on page load. The default color of the placeholder is light gray. But we can change the color of placeholder text using CSS properties.
The ::placeholder CSS pseudo-element represents the placeholder in the <input> and <textarea>. The color property can be used with ::placeholder to change the text color.
Example: Change the text color of placeholder within <input>
Here, we will used ::placeholder to change the color of the text to red color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
input::placeholder {
color: red;
}
</style>
</head>
<body>
<h2> Change placeholder text color</h2>
<input placeholder="type here">
</body>
</html>
Output
Here is the output of the above program.
Example: Change the text color of placeholder within textarea
Here, the example change color of placeholder of a textarea.
We can change the text color of the placeholder by using CSS color property with ::placeholder pseudo-element. It can be used with both <input> and <textarea> elements.
