How to change a html 5 input placeholder color with CSS?
A placeholder attribute within the input specifies the short hint that is placed temporarily at the input field. It can be later replaced with the actual value.
Example to create a simple input with a placeholder.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h3> Default placeholder color </h3>
<input type="text" placeholder="placeholder">
</body>
</html>
Output
Here in the output, we can see that the placeholder color is grey.
Changing the Placeholder color with CSS
The default color of the placeholder in most of the browsers is grey. But we can easily change the placeholder using CSS. In most modern browsers, the placeholder can be changed using ::placeholder selector. Add the color to the selector. But this selector varies from browser to browser.
For example :
In Chrome, Mozilla, and Opera browsers the placeholder color can be changed within ::placeholder selector.
Whereas Internet Explorer uses :ms-input-placeholder and Microsoft uses :-ms-input-placeholder.
Here is an example to change the placeholder color using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:-ms-input-placeholder {
color: black; /* Internet Explorer 10-11 */
}
::-ms-input-placeholder {
color: cyan; /* Microsoft Edge */
}
::placeholder {
color: green; /* Firefox, Chrome, Opera */
}
</style>
</head>
<body>
<h3> placeholder color </h3>
<input type="text" placeholder="placeholder">
</body>
</html>
Output
Here is the output showing the different colors of a placeholder at different browsers.
For Chrome browser
For Microsoft Edge
For Internet Explorer
Conclusion
In this tutorial, we have used a CSS selector to change the color of the placeholder. The selector may vary for the browsers.
