Signup/Sign In

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.

placeholder

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

chrome placeholder

For Microsoft Edge

Microsoft Edge placeholder

For Internet Explorer

Internet Explorer placeholder

Conclusion

In this tutorial, we have used a CSS selector to change the color of the placeholder. The selector may vary for the browsers.