改变input标签中placeholder显示的颜色

最新推荐文章于 2025-07-07 15:00:30 发布

原创最新推荐文章于 2025-07-07 15:00:30 发布 · 2.4w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#placeholder #input标签

web 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用CSS伪元素为不同浏览器自定义input标签中placeholder的颜色。通过WebKit、Mozilla Firefox和Internet Explorer等浏览器的特定样式设置，实现统一的视觉效果。

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

使用伪元素可以改变input标签中placeholder显示的格式，以颜色为例:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #A9A9A9;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #A9A9A9;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #A9A9A9;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #A9A9A9;
}