开发者

How to set the color of "placeholder" text?

开发者 https://www.devze.com 2023-03-02 07:41 出处:网络
Is that possible to set the color of placeholder text ? <textarea placeholder=\"Write your message here...\"></开发者_StackOverflow社区textarea>

Is that possible to set the color of placeholder text ?

<textarea placeholder="Write your message here..."></开发者_StackOverflow社区textarea>


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


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


Try this

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


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


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


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


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

精彩评论

暂无评论...
验证码 换一张
取 消