Grow your CSS skills. Land your dream job.

Last updated on:

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 { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

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

Comments

  1. Permalink to comment#

    123
    456789

    • nitin reddy
      Permalink to comment#

      how to position placeholder from left with 30 px margin ?

    • solution
      Permalink to comment#

      text-indent: 30px;

    • nitin reddy
      Permalink to comment#

      Hey folks thanks a ton :)

    • Manikandan Rajavel
      Permalink to comment#

      Placeholer text is getting hidden when we shrink the browser . Is there any option for move the hiding text to next line when we reduce size of the browser .

  2. Juarez P. A. Filho
    Permalink to comment#

    Always saving my day. ^^

  3. Awesome Chris — thanks for saving my day again!

  4. 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 :)

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

  6. Hi,

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

    Thank you.

  7. Damon Sharp
    Permalink to comment#

    Why does doing it this way not work??…


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

    or

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

    • 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).

    • deesh
      Permalink to comment#

      input:-moz-placeholder{color:#999}
      input:-ms-input-placeholder{color:#999}

      it works

      AnswersLab.com

    • Permalink to comment#

      I had to read this 3 times to get it to click in my head…

      “when a browser doesn’t understand a SELECTOR, it invalidates the entire line of selectors”

      I keep looking at it and assuming it’ll behave like browser specific RULES since they look like rules.

      Chris – It might be worth updating this to address the moz change from pseudo-class to element

      :-moz-placeholder pseudo-class will be deprecated in favor of the ::-moz-placeholder pseudo-element in Firefox 19.

    • king
      Permalink to comment#

      do it this way—–

      input[placeholder], [placeholder], *[placeholder] {
      color: blue;
      }

    • Dear Damon Sharp
      You will direct target the attribute(placeholder) and change the style which you want to do,It’s Work,

      For example
      input[placeholder] {
      border: 1px solid green;
      }

      Regard
      Najeed ur Rehman

  8. gen
    Permalink to comment#

    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

  9. Not supported in FF5? Can anybody else confirm this?

  10. 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.

  11. Permalink to comment#

    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.

  12. 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. :)

    • Permalink to comment#

      Thanks for this! It’s great to know that you can chain :focus::-webkit-input-placeholder like this =D It appears that all of my browsers (safari, chrome, firefox) don’t make the placeholder disappear when the input field gets focus by default.

    • Ronald Quinee
      Permalink to comment#

      What to do on Mozilla? It works fine on Chrome.

    • Saurav
      Permalink to comment#

      Thanks buddy. It works like a charm…

    • Simon Templar
      Permalink to comment#

      After three years, it is still a great response (and a solution) for having this problem.
      thanks for this!!

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

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

  14. Permalink to comment#

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

  15. Permalink to comment#

    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?

    • Permalink to comment#

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

  16. Sonam S Diwate
    Permalink to comment#

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

    Regards,
    Sonam

    • Sonam S Diwate
      Permalink to comment#

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

      Regards,
      Sonam

    • 2Edson

      Try to use text-indent instead margin

  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).”

  18. ksh

    Hi, how can I style placeholder position on iphone? Text-align, vertical-align, margin, padding doesn’t work.

  19. Juuso Palander
    Permalink to comment#

    Is there any way to change the font-size correctly?

    When I set font-size to 14px the text is cut in half and padding-bottom doesn’t help.

    Any ideas?

  20. crawpdx
    Permalink to comment#

    It’s figuring out the little things like this that can suck the momentum out of a project!

    Thanks for the quick fix Chris!

  21. Is it possible to change the last letter of the placeholder text? I would like to show an asterisk in a different color for required inputfielfds

    • Agent
      Permalink to comment#

      have a look into using the CSS :after Selector

    • Permalink to comment#

      Here is an example, but for some reason it is not working in IE8-9.

      ::-webkit-input-placeholder { color: #000; font-family: sans-serif; }
      ::-moz-placeholder { color: #000; font-family: sans-serif; } 
      :-ms-input-placeholder { color: #000; font-family: sans-serif; }
      input:-moz-placeholder { color: #000; font-family: sans-serif; }
      
      .required::-webkit-input-placeholder:after { content: "*"; color: red; } 
      .required::-moz-placeholder:after { content: "*"; color: red; } 
      .required:-ms-input-placeholder:after { content: "*"; color: red; } 
      .requiredinput:-moz-placeholder:after { content: "*"; color: red; } 
      
  22. rapid
    Permalink to comment#

    Hi,
    this works fine for me but my problem is I want to change the watermark color in IE…can any one suggest me to change the color of watermark in IE

  23. Permalink to comment#

    Please only give advice which you tested. Because this is foolish.
    I think that you should take a better look at the pseudo element. It doesn’t work inside the placeholder.
    If you can get a placeholder text that says “Name” in purple and then
    add a exclamation mark in green behind it using psuedo elements.. then proof it.
    FYI, so it says “Name!” in TWO colors, as a placeholder.

  24. Permalink to comment#

    Jezus! Why does it work now. Did I make a typo?? Well Zoe I love you. Thanks for the visuals.

  25. Permalink to comment#

    why there is two ” :: ” in webkit but in other engins one ” : ” ??

  26. Permalink to comment#

    no body????

  27. Thanks for this trick :)

  28. Shailesh Singh
    Permalink to comment#

    great this is very helpfull for me

  29. Just for the record… if anyone requires different coloured placeholders on different elements you can narrow down your selection like this: #first-element ::-webkit-input-placeholder {color: black;} #second-element::-webkit-input-placeholder {color: red;}

  30. Awesome! works fine :) Thank you for sharing.

  31. Paul
    Permalink to comment#

    Hi,
    I wonder if there is a code that would hide the text in the search box, place holder, by using CSS. (I was able to change the color, thanks!)
    I’m using the plugin Predictive Search for WP. As I can’t find the location of the file where the search form is. (I could change the text there, or delete it there I believe), so I thought I would use CSS to hide it instead if possible.
    The search box default text says “Search for products” which I don’t like. I would rather have it to say “Search this site”, or just keep it empty. I tested around with some of the codes you have presented without success.

  32. Hi, this is what I use:

    /*
    * Placeholders consistency
    * */
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: grey;
    }
    input:-moz-placeholder, textarea:-moz-placeholder {
    color: grey;
    }
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: grey;
    }

  33. Permalink to comment#

    Firefox 19 lowers the opacity of the placeholder to 0.54 by default.
    To get the correct color you need to reset it:
    ::-moz-placeholder { opacity: 1; color: red; }

    • THANK YOU!

      This was driving me nuts. It hadn’t occurred to me that it was the opacity.

    • Chris
      Permalink to comment#

      Thank you so much for the opacity point, this has been driving me nuts!

    • AntonHH
      Permalink to comment#

      Finally the answer!!! :-) Thanks a lot!!!

    • ::-moz-placeholder {opacity: 1; color: #fff; } was the fix. The opacity was driving me crazy – I thought I’d tried it once, but I think I was missing the “::” for FF 19+. Thanks for the tip on this, I was about to give up on Firefox 20.

  34. Ismael Miguel
    Permalink to comment#

    why don’t you use a jQuery plugin?
    i had some trouble and this code just worked pretty fine for me:

    http://jsfiddle.net/gVScP/2/

    you just need to do this:
    if you use it on a form, the form will have a submit event to clear the placeholder text.
    on this case,it will just show the value of every field, after submission.

    if you set it on a field, it will behave closely to the default placeholder.

    on one hand, this is that it needs jQuery and javascript!
    on the other hand, ie users won’t see a empty field, and it will remain the styles.

    on your css, just put the class .hasPlaceholder and you are good to go!

  35. Permalink to comment#

    I was looking for some compatiblity stats for placeholder styling with CSS on mobile and it seems nothing to me on the internet. So I made some tests with default Android and iOS browsers and here what we got. Most of the latest OS versions default browsers doesn’t support text-align as well as padding and some other propeties for placeholder.

  36. Is it at all possible to style the placeholder so that it doesn’t disappear when someone starts typing? I’m thinking something along the lines of:

    [ Name]

    Then the user inputs:

    [BRIAN Name]

    … so that the placeholder, “Name” stays visible?

  37. Jessie
    Permalink to comment#

    I have a same issue as Brian, and strangely cannot find an answer. We want to show the username field prefilled as “@ourcompany.com”, and to remain as they type (though it should only pass the username).

  38. Sajin Philip
    Permalink to comment#

    thanks team.. its nice, i really like it

  39. prince
    Permalink to comment#

    thank you…..yes,….its work fine…..but i want to set dark black color….
    when i put #000000…its set light black….:) any idea…?

  40. Here’s a short mixing for styling your placeholder text.
    Simply insert it in inside the INPUT selector.
    @mixin placeholder($color){
    &::-webkit-input-placeholder {
    color: $color;
    }
    &:-moz-placeholder { /* Firefox 18- /
    color: $color;
    }
    &::-moz-placeholder { /
    Firefox 19+ */
    color: $color;
    }
    &:-ms-input-placeholder {
    color: $color;
    }
    }
    input{
    background-color: $cyan;
    color:white;
    @include placeholder(white);
    }
    I would love it if you could let me know if this was helpful! Twit @NirBenita

  41. archetype
    Permalink to comment#

    Has anyone discovered a work-around for making Mozilla act like Webkit on the chained pseudo-selectors? I would really like to use :focus to change the color of the text on click. Do I need JS to make this happen?

  42. Georges
    Permalink to comment#

    This is working on computer browsers, but not on mobile devices where i am developing a phonegap mobile application. Any idea ?

  43. if you use [placeholder]::-moz-placeholder etc, it’d clean up Firebug.

  44. Monty Hu

    I have my CSS set up to make button tags the same exact height as my input tags, in addition to aligning them perfectly.

    But, when I style ::-webkit-input-placeholder to use a font size that is smaller than the font for my input fields, the height of the input field remains consistent, but the fields are 1 pixel lower than the button, throwing the alignment off for some reason. On Firefox, lowering the font-size for the placeholder doesn’t affect the alignment.

    Any idea why changing the font-size for placeholder text in webkit browsers alters the field alignment?

  45. Sayan
    Permalink to comment#

    its awesome ..thanks

  46. indranil chakraborty
    Permalink to comment#

    yes … its working on firefox … on other browser it may be…

    whatever thanks for the help

  47. Thanks Chris, Exactly what I was looking for!

  48. Lynda
    Permalink to comment#

    I assume there will be a day without vendor prefixes. Will it look like this?

    ::input-placeholder {
    color: red;
    }

    Should I add this line without a prefix like we do with other CSS properties?

  49. Ziemowit
    Permalink to comment#

    Ok, where the heck put the vendor prefix with this:

    .wpcf7-form fieldset input[type=”text”] {
    float: left;
    margin-top: -16px;
    width: 100%;
    height: 2em;
    border: none;
    font-size: 1em;

    }

    I’d be grateful for any help :)

  50. Hifzur Rahman
    Permalink to comment#

    Is it working in IE

  51. Permalink to comment#

    The styling of placeholder is working on computer browsers (Chrome), but not on mobile devices. In my case the color is working… but “line-height” is not working…

  52. Varun
    Permalink to comment#

    Thanks, Chris! This is exactly what I was looking for.

  53. Nithin
    Permalink to comment#

    @Thibaut, Thank you very much for the opacity tip, it was running me crazy :).

  54. Ramesh Chowdarapally
    Permalink to comment#

    “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).”

    This is really a new useful thing i learnt Now.

  55. into
    Permalink to comment#

    It works for me in FF but not in Chrome…

  56. Just a heads up in this post.
    The placeholder text is full black (#000000) it just has some opacity.
    If you need the placeholder text to be solid black, you need to do like this:

    ::-webkit-input-placeholder { /* WebKit browsers */
        color:    #000;
        opacity: 1;
    }
    
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    #000;
        opacity: 1;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:    #000;
        opacity: 1;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color:    #000;
        opacity: 1;
    }
    
  57. adarsh
    Permalink to comment#

    how to use padding: for that?

  58. Tey
    Permalink to comment#

    doesn’t work on IE(even 11):

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

    this works :) :

    [placeholder]:-ms-input-placeholder {  
       color: red;  
    }
    
  59. Adam Bankin
    Permalink to comment#

    I know this is a bit late but…

    If :-ms-placeholder is used on an item (input or textarea) and the color property is then set later in the cascade or by a rule that has greater specificity, then IE will apply THAT color (the text color) to the placeholder.

    So use !important with :-ms-placeholder

    http://jsbin.com/dufubemu/1/edit

    • g
      Permalink to comment#

      Better late than never, just came here and found this tip

      Thanks man!

  60. Venkatesh Manohar

    Thanks a lot for this article. This is what worked for me. The id of the element is inputQry
    `#inputQry::-webkit-input-placeholder {
    color:red;
    }

    #inputQry::-moz-placeholder { /* Firefox 18- */
    color:red;
    }

    #inputQry::-moz-placeholder { /* Firefox 19+ */
    color:red;
    }

    #inputQry::-ms-input-placeholder {
    color:red;
    }`

  61. Altaf

    This was really helpful. But what if I need to put multiple colors to my placeholder text? To be precise, I need to make google logo in my placeholder and to do so I need to color “G” and “g”, blue; “o” and “e”, red and so on… I found the :nth-letter pseudo selector interesting but it is not functional yet. So, could anyone please riddle me this?

  62. Jignesh
    Permalink to comment#

    i want to change color of “data-placeholder”. i try given solution but it’s not apply on multi selection. please any one have solution?

  63. If you want to give the place holder color pure white , then you have to use opacity:1 , otherwise it will be gray color. So the code to make the place holder color white is

    ::-webkit-input-placeholder {
    color: #FFFFFF;
    opacity:1;
    }

    :-moz-placeholder { /* Firefox 18- */
    color: #FFFFFF;
    opacity:1;
    }

    ::-moz-placeholder { /* Firefox 19+ */
    color: #FFFFFF;
    opacity:1;
    }

    :-ms-input-placeholder {
    color: #FFFFFF;
    opacity:1;
    }

  64. If you want to use this for a particular input class (e.g input which has a class “search-field”)then use it like this

    .search-field::-webkit-input-placeholder {
    color: #FFFFFF;
    opacity:1;
    }

    .search-field:-moz-placeholder { /* Firefox 18- */
    color: #FFFFFF;
    opacity:1;
    }

    .search-field::-moz-placeholder { /* Firefox 19+ */
    color: #FFFFFF;
    opacity:1;
    }

    .search-field:-ms-input-placeholder {
    color: #FFFFFF;
    opacity:1;
    }

    • inasher
      Permalink to comment#

      This is true and also useful for all blacks and Grays (if you want tu aplay placeholder in firefox on a gray color)

  65. Rulo
    Permalink to comment#

    If it’s still not working for you, don’t forget to add !important to your rules.

  66. srikanth pappu
    Permalink to comment#

    it is not working for firfox,…

    ::-moz-placeholder:after {
    }

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".