CODEWITHSUNDEEP
csshtmlcolors
Misha Moroshko
Misha Moroshko

Reputation: 171449

How to set the color of "placeholder" text?

Is that possible to set the color of placeholder text ?

<textarea placeholder="Write your message here..."></textarea>

Upvotes: 27

Views: 144660

Answers (7)

daraptoor
daraptoor

Reputation: 161

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; }

Upvotes: 6

Ankit Pundhir
Ankit Pundhir

Reputation: 1097

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

Upvotes: 3

Altynbek S.
Altynbek S.

Reputation: 1

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" />

Upvotes: -2

HasanAboShally
HasanAboShally

Reputation: 18725

::-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;
}

Upvotes: 28

skidadon
skidadon

Reputation: 547

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; }

Upvotes: -4

Vassi
Vassi

Reputation: 780

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

Upvotes: 23

Suresh Pattu
Suresh Pattu

Reputation: 6219

Try this

textarea::-webkit-input-placeholder {  color: #999;}

Upvotes: 11

Related Questions