Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

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