在Web开发中，表单输入框的placeholder占位符默认样式通常由浏览器决定，颜色和字体可能和整体设计不搭。我们可以通过CSS的伪元素来重写这些样式，让占位文字更协调。
为什么需要特殊处理
placeholder并不是普通的文本节点，它是输入框的一个提示属性。不同浏览器暴露了不同的伪元素或伪类来控制它的样式，因此必须写多套规则才能全覆盖。
各浏览器的写法
主要需要兼容WebKit内核、Firefox以及微软的Edge旧版本。下面列出常用的选择器：
- WebKit内核（Chrome、Safari）：
::-webkit-input-placeholder - Firefox 19+：
::-moz-placeholder - Firefox 4到18：
:-moz-placeholder - Edge旧版：
:-ms-input-placeholder
完整代码示例
以下代码将占位符颜色改为浅灰，并调小字号：
/* 通用写法，使用属性选择器覆盖input和textarea */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999;
font-size: 13px;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #999;
font-size: 13px;
opacity: 1; /* Firefox默认会降低透明度，需显式置1 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999;
font-size: 13px;
}
注意事项
在HTML中，占位符通过placeholder属性设置，例如<input type="text" placeholder="请输入姓名">。伪元素仅控制样式，不影响属性本身的值。
提示：不要试图用普通的元素选择器去改placeholder，必须使用对应的伪元素，否则样式不会生效。
使用变量简化
如果项目支持CSS变量，可以把颜色提取出来：
:root {
--ph-color: #999;
}
input::-webkit-input-placeholder {
color: var(--ph-color);
}
input::-moz-placeholder {
color: var(--ph-color);
}
小结
用CSS修改placeholder样式核心就是写带浏览器前缀的伪元素规则，注意Firefox的透明度问题。按照上面的示例，你可以快速定制任何表单提示文字的外观。
CSSplaceholder伪元素修改时间：2026-07-29 07:03:16