input 光标颜色和 placeholder 属性样式（颜色，大小，位置）

最新推荐文章于 2025-07-17 11:50:59 发布

原创最新推荐文章于 2025-07-17 11:50:59 发布 · 5.5k 阅读

4 ·

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

收录于

css

当前文章被收录于：

css

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍了如何使用CSS修改HTML输入框的光标颜色和占位符（placeholder）的样式，包括颜色、字体大小及位置调整，并提供了跨浏览器兼容性的解决方案。

1、input 光标颜色

input 光标颜色和定义的字体颜色一样绑定 color 即可

input {
  color: red;
}

2、placeholder 样式修改

input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #666;
  /* placeholder字体大小  */
  font-size: 12px;
  /* placeholder位置  */
  text-align: right;
}

为兼容各个浏览器，如下：

input::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #666;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #666;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #666;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #666;
}

标签

#placeholder