Code Snippet

Home » Code Snippets » CSS » Style Placeholder Text

Style Placeholder Text

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties.

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder {
   color: red;
}

Reference URL

Subscribe to The Thread

  1. 123

    123
    456789

    Reply ↓
  2. Juarez P. A. Filho

    Always saving my day. ^^

    Reply ↓
  3. Galen Gidman

    Awesome Chris — thanks for saving my day again!

    Reply ↓
  4. wdalhaj

    nice one..am adding that if you want to add a background-image (eg..search icon )..you can control the space between the place-holder text and that image using the padding of the “father” input tag :)

    thanx :)

    Reply ↓
  5. Optimise Web

    Thanks. Using Placeholders for the first time. HTML5 rocks!

    Reply ↓
  6. Gerhardt

    Hi,

    that’s cool, now i can realise placeholder without Java Script.

    Thank you.

    Reply ↓
  7. Damon Sharp

    Why does doing it this way not work??…


    ::-webkit-input-placeholder, :-moz-placeholder {
    color: red;
    }

    or

    ::-webkit-input-placeholder, input:-moz-placeholder {
    color: red;
    }

    Reply ↓
    • Chris Coyier

      That would be nice, but the problem is that when a browser doesn’t understand a selector, it invalidates the entire line of selectors (except IE 7).

  8. gen

    Hi,

    On my application, when i click on the placeholder text inside the textfield,the cursor does not appear but when I click at the end/outside the text ,the cursor appears .

    Enter the username

    Double click on the text “Enter the username” works(can type anything inside textfield).
    click on the end/outside the text works.(can type anything inside textfield).
    But single click on the text and type does not work.(cannot see cursor at all)

    What could be the problem here?

    Thanks

    Reply ↓
  9. Kevin Powell

    Not supported in FF5? Can anybody else confirm this?

    Reply ↓
  10. Kevin Powell

    Nevermind, found the issue. If you have a more specific selector to style your regular input text color, then input:-moz-placeholder is actually overridden.

    Example:

    #selector input{
    color:red
    }

    input:-moz-placeholder{
    color:green
    }

    Result: placeholder will be red. Instead you’ll need to do:

    #selector input{
    color:red;
    }

    #selector input:-moz-placeholder{
    color:green;
    }

    Maybe that’s obvious, but it tripped me up for a few minutes.

    Reply ↓
  11. Kyle Arch

    Noticed when testing it myself that both the webkit and mozilla prefixes needed double colons, and worked just fine when using specific input id’s.

    Reply ↓
  12. Jeremy Benaim

    Just to share a useful tip which rely on this rule. On iOS, the placeholder doesn’t disapear on focus. So you can use “:focus::-webkit-input-placeholder{color:transparent;}” and it works very well. :)

    Reply ↓
  13. Bran van der Meer

    You might want to add the following for IE 10 support:

    :-ms-input-placeholder {
        color: red;
    }

    Reply ↓
  14. Edson

    Don’t work for me. I had to use !important for them…

    Reply ↓
  15. Edson

    By the way, why the placeholder for webkit don’t fade away when we click on the field as it does in Firefox? Do we need to use js?

    Reply ↓
    • Edson

      Really sorry about my last comment, I didn’t read the helpful tip from Jeremy Benaim…

  16. Sonam S Diwate

    Hi,
    I am getting extra left space other than padding in placeholder.

    Regards,
    Sonam

    Reply ↓
    • Sonam S Diwate

      Hi,
      I am getting extra left space other than padding in placeholder.
      but it is happening only in iphone browser

      Regards,
      Sonam

  17. Ashwin

    Thanks for the tip – “That would be nice, but the problem is that when a browser doesn’t understand a selector, it invalidates the entire line of selectors (except IE 7).”

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~