修改指定的input框，textarea的placeholder样式

最新推荐文章于 2024-04-18 15:39:08 发布

原创最新推荐文章于 2024-04-18 15:39:08 发布 · 3.2w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#修改 #placeholder #input #textarea

html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种通过CSS来统一设置网页中所有input和textarea元素的placeholder样式的技巧，并展示了如何针对特定类别的input和textarea元素进行个性化样式设置。

修改全局的input，textarea的placeholder样式

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #b3b3b3;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#b3b3b3;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:#b3b3b3;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#b3b3b3;
}

参考的链接：https://jingyan.baidu.com/article/ed2a5d1f60afa009f6be17da.html

修改指定的input、textarea的placeholder样式

html：

css:

input[class='zd_input']::-webkit-input-placeholder, textarea[class='zd_textarea']::-webkit-input-placeholder {
color: #b3b3b3;
}
input[class='zd_input']:-moz-placeholder, textarea[class='zd_textarea']:-moz-placeholder {
color:#b3b3b3;
}
input[class='zd_input']::-moz-placeholder, textarea[class='zd_textarea']::-moz-placeholder {
color:#b3b3b3;
}
input[class='zd_input']:-ms-input-placeholder, textarea[class='zd_textarea']:-ms-input-placeholder {
color:#b3b3b3;
}