This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Change an HTML5 input's placeholder color with CSS

    Benjamin FoxBenjamin Fox

    We will look at what CSS selectors to use to change an HTML5 inputs placeholder color. This can differ from browser to browser, so, we will make sure to cover all of the cases.

    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss