修改input的placeholder颜色

最新推荐文章于 2024-11-25 16:14:12 发布

转载最新推荐文章于 2024-11-25 16:14:12 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/carriezhao/p/6927431.html

本文介绍了如何在不同浏览器中设置CSS输入框占位符颜色，包括WebKit浏览器、Mozilla Firefox和Internet Explorer等，并提供了特定样式的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、CSS选择器

因为每个浏览器的CSS选择器有所差异，所以需要针对每个浏览器做单独的设定。

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

2、textarea风格样式的代码，如下：

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

3、指定修改哪个input的placehoder属性，可以使用class

input.addCardInput::-webkit-input-placeholder{
color: #ccc;
}
input.addCardInput:-moz-placeholder{
color: #ccc;
}
input.addCardInput::-moz-placeholder{
color: #ccc;
}
input.addCardInput:-ms-input-placeholder{
color: #ccc;
}

4、在Firefox和IE里，正常input文本颜色覆盖占位符颜色的方法：

::-webkit-input-placeholder {
color: red; text-overflow: ellipsis;
}
:-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
::-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
} /* for the future */
:-ms-input-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}

转载于:https://www.cnblogs.com/carriezhao/p/6927431.html