Change an HTML5 input's placeholder color with CSS

[00:01] We start with a simple form input with some placeholder text. We're going to use CSS pseudo-elements to style the color of that text. For Chrome, Opera, and Safari, we use the vendor prefix ::-webkit-input-placeholder.

[00:15] We'll set the color of the placeholder text to orange. Refresh Chrome, and you now see the placeholder text is orange. If we switch over to Opera and refresh, it's also orange. Refreshing in Safari, orange as well.

[00:48] Let's look at Firefox. For Firefox versions 19 and above, we use a similar prefix, ::-moz-placeholder. Again, color, we'll use orange. We will save that and refresh Firefox. Notice how the color isn't as dark as the other browsers. That's because Firefox has a 05 opacity by default on placeholder text.

[01:19] To fix that, we use opacity one. Refresh, and it now matches. To cover our bases, Firefox 18 and below, we use :-moz-placeholder. Note the single colon here for this pseudo-class. We'll set color to orange and opacity to one.

[01:51] Finally, for Microsoft Internet Explorer 10 and above, we use the prefix :-ms-input-placeholder. We'll set color to orange. For consistency, we'll set opacity to one on that, and also for the webkit browsers. We now have consistently colored placeholder text across all browsers.