How to change HTML5 input placeholder color

The best way to change the color of an HTML5 input placeholder is to use the ::placeholder CSS pseudo-element.

By default, the color of an HTML input placeholder is set to light gray in most browsers.

Changing the color of an input field’s placeholder text

In this example, you have an input field on an HTML page. On the input field is placeholder text labeled ‘Email’:

<html>
	<body>
		<form>
			<input type="text" placeholder="Email">
			<input type="submit">
		</form>
	</body>
</html>

To change the color of the input field’s placeholder text from the default light gray to something else, use the ::placeholder pseudo-element:

::placeholder {
	color: rgb(0, 123, 168);
}

Changing input placeholder color in older browsers

The ::placeholder pseudo-element works with modern browsers. To optionally support some older browsers, you can use vendor prefixes as follows:

::-webkit-input-placeholder {
	color: rgb(0, 123, 168);
}
:-moz-placeholder {
	color: rgb(0, 123, 168);
}
::-moz-placeholder {
	color: rgb(0, 123, 168);
}
:-ms-input-placeholder {
	color: rgb(0, 123, 168);
}
::placeholder {
	color: rgb(0, 123, 168);
}

That’s all there is to it! The color of the input placeholder text is now changed accordingly.