Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Change an HTML5 input's placeholder color with CSS


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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.

    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.

    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.

    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.

    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.