input和textarea设置placeholder属性的颜色、字体大小

最新推荐文章于 2025-03-05 17:02:45 发布

最初都是小白

最新推荐文章于 2025-03-05 17:02:45 发布

阅读量1.5w

点赞数 4

分类专栏： Css 文章标签： placeholder属性的样式修改

本文链接：https://blog.csdn.net/Originally_M/article/details/91969834

版权

Css 专栏收录该内容

20 篇文章

订阅专栏

本文提供了针对不同浏览器的解决方案，确保input和textarea的placeholder颜色在Webkit、Firefox、IE等浏览器中显示为白色，覆盖了从WebKit到IE10的各种伪类和伪元素。

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

刚刚拿到一个设计图中的input的placeholder是白色的然后就给大家整理了一下。

在这里插入图片描述

以下是 input 的解决代码：

/* WebKit browsers  */
input::-webkit-input-placeholder {
    color: #fff;
   /* 字体大小直接写样式即可 */
    font-size: 28px;
}
/*  Mozilla Firefox 4-18使用伪类 */
input:-moz-placeholder {
  color: #fff;
}
/* Mozilla Firefox 19+ 使用伪元素  */
input::-moz-placeholder { 
  color: #fff;
}
/* IE10使用伪类 */
input:-ms-input-placeholder {
  color: #fff;
}

textarea 的解决代码

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