27

Is that possible to set the color of placeholder text ?

<textarea placeholder="Write your message here..."></textarea>
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
  • possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) – Jave Jan 22 '14 at 09:09
  • 1
    There's a very full (and much better) answer to this question here: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – Idris Mokhtarzada Jan 18 '12 at 17:19

7 Answers7

28
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}
HasanAboShally
  • 18,459
  • 7
  • 30
  • 34
23

Nobody likes the "refer to this answer" answers, but in this case it may help: Change an HTML5 input's placeholder color with CSS

Since it's only supported by a couple of browsers, you can try the jQuery placeholder plugin (assuming you can\are using jQuery). It allows you to style the placeholder text via CSS since it's really only a swap trick it does with focus events.

The plugin does not activate on browsers that support it, though, so you can have CSS that targets chrome\firefox and the jQuery plugin's CSS to catch the rest.

The plugin can be found here: https://github.com/mathiasbynens/jquery-placeholder

Community
  • 1
  • 1
Vassi
  • 780
  • 5
  • 14
11

Try this

textarea::-webkit-input-placeholder {  color: #999;}
Suresh Pattu
  • 6,083
  • 16
  • 59
  • 91
6

For giving placeholder a color just use these lines of code:

::-webkit-input-placeholder { color: red; }
::-moz-placeholder {color: red; }
:-ms-input-placeholder { color: red; } 
:-o-input-placeholder { color: red; }
nobody
  • 19,814
  • 17
  • 56
  • 77
daraptoor
  • 131
  • 3
  • 10
3
#Try this:

input[type="text"],textarea[type="text"]::-webkit-input-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]:-moz-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]::-moz-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]:-ms-input-placeholder {
    color:#f51;
}

##Works very well for me.
Ankit Pundhir
  • 1,097
  • 8
  • 13
-2

Try this

input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #f51;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #f51;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #f51;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #f51;
}
<input type="text" placeholder="Value" />
Pieter Goosen
  • 9,768
  • 5
  • 35
  • 55
Altynbek S.
  • 11
  • 6
    Boo. You just took an answer that was written a 1.5 years previously and added the code snippet to it. – JakeParis Feb 16 '15 at 17:40
-4

For Firefox use:

 input:-moz-placeholder { color: #aaa; }
 textarea:-moz-placeholder { color: #aaa;}

For all other browsers (Chrome, IE, Safari), just use:

 .placeholder { color: #aaa; }
skidadon
  • 547
  • 4
  • 7
  • `.placeholder { color: #aaa; }` will change the color of the text not the placeholder -1 – Jo E. Jul 29 '14 at 16:50
  • That makes no sense @Deadpool. The original question asked about changing the color of the placeholder text, which this solution does. – skidadon Nov 11 '14 at 04:39
  • `.placeholder` targets elements with a class `placeholder` e.g. `class="placeholder"` so the line `.placeholder { color: #aaa; }` will change the color of the text not the placeholder. – Jo E. Nov 14 '14 at 03:01
  • Gotcha. And yeah, you are correct. I did implement this in the past, but I typed this (non)solution in directly without testing it. Good catch @Deadpool. – skidadon Nov 14 '14 at 21:28