css表单输入框占位符颜色如何自定义_使用::placeholder设置字体颜色-css教程-PHP中文网

css表单输入框占位符颜色如何自定义_使用::placeholder设置字体颜色

P粉602998670

发布： 2025-12-17 18:56:02

原创

579人浏览过

使用 ::placeholder 伪元素可自定义表单输入框占位符颜色和字体样式，如 input::placeholder { color: #999; }，支持现代浏览器，兼容旧版需添加前缀写法，注意仅能设置文字相关样式且应保证可读性。

css表单输入框占位符颜色如何自定义_使用::placeholder设置字体颜色

表单输入框的占位符（placeholder）默认颜色通常较浅，有时与页面风格不匹配。可以通过 CSS 的 ::placeholder 伪元素来自定义其颜色，甚至设置字体大小、样式等。

使用 ::placeholder 修改颜色

直接对输入框使用 ::placeholder 伪元素，设置 color 属性即可改变占位符文字的颜色。

input::placeholder {
  color: #999;
}

登录后复制

这个规则会让所有 input 元素的占位符文字变成灰色。你也可以针对特定输入框设置：

.custom-input::placeholder {
  color: #ccc;
  font-style: italic;
}

登录后复制

兼容性处理（可选）

虽然现代浏览器普遍支持 ::placeholder，但为了兼容更老的浏览器，可以加上带前缀的写法：

ListenLeap

AI辅助通过播客学英语

217

查看详情

立即学习“前端免费学习笔记（深入）”；

/* WebKit 浏览器 */
input::-webkit-input-placeholder {
  color: #999;
}
<p>/<em> Firefox 18- </em>/
input:-moz-placeholder {
color: #999;
}</p><p>/<em> Firefox 19+ </em>/
input::-moz-placeholder {
color: #999;
}</p><p>/<em> 标准语法 </em>/
input::placeholder {
color: #999;
}</p>

登录后复制

现在大多数项目只需使用标准语法 ::placeholder 即可，除非需要支持非常旧的浏览器版本。