Question

是否可以设置placeholder文字的颜色？

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

Answer 1

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

Answer 2

没有人喜欢“参考这个答案”的答案，但在这种情况下它可能会有所帮助：Change an HTML5 input's placeholder color with CSS

由于它只受到几个浏览器的支持，你可以试试jQuery占位符插件（假设你可以\正在使用jQuery）。它允许您通过CSS设置占位符文本的样式，因为它实际上只是它与焦点事件的交换技巧。

但是，插件不会在支持它的浏览器上激活，所以你可以使用针对chrome \ firefox的CSS和jQuery插件的CSS来捕捉其余部分。

该插件可在此处找到：https://github.com/mathiasbynens/jquery-placeholder

Answer 3

试试这个

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

Answer 4

为了给占位符一个颜色，只需使用以下代码行：

::-webkit-input-placeholder { color: red; }
::-moz-placeholder {color: red; }
:-ms-input-placeholder { color: red; } 
:-o-input-placeholder { color: red; }

Answer 5

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

Answer 6

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

Answer 7

对于Firefox使用：

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

对于所有其他浏览器（Chrome，IE，Safari），只需使用：

 .placeholder { color: #aaa; }

如何设置“占位符”文本的颜色？

7 个答案: