在前端开发中，修改输入框占位符placeholder的颜色是优化表单样式的基础操作，但由于不同浏览器对placeholder样式的支持规则不同，需要通过适配不同浏览器的伪类选择器来实现兼容效果。
不同浏览器的placeholder伪类选择器
目前主流浏览器对placeholder的样式支持分为几类，各自对应的伪类选择器如下：
- Chrome、Safari等WebKit内核浏览器：使用
::-webkit-input-placeholder - Firefox 19+版本：使用
::-moz-placeholder，注意这里冒号是两个 - Firefox 18及以下版本：使用
:-moz-placeholder，只有一个冒号 - IE10+版本：使用
:-ms-input-placeholder
设置placeholder颜色的具体代码
我们可以通过组合上述伪类选择器，实现全浏览器兼容的placeholder颜色设置，示例代码如下：
/* 兼容WebKit内核浏览器 */
::-webkit-input-placeholder {
color: #999999; /* 设置placeholder颜色为浅灰色 */
}
/* 兼容Firefox 19+ */
::-moz-placeholder {
color: #999999;
opacity: 1; /* Firefox默认会给placeholder加透明度，需要显式设置opacity为1保证颜色生效 */
}
/* 兼容Firefox 18及以下 */
:-moz-placeholder {
color: #999999;
opacity: 1;
}
/* 兼容IE10+ */
:-ms-input-placeholder {
color: #999999;
}
/* 也可以直接使用input选择器来统一设置，避免重复写样式 */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input:-ms-input-placeholder {
color: #666666;
}
注意事项
Firefox的透明度问题
Firefox浏览器默认会给placeholder文字添加0.5左右的透明度，即使我们设置了color属性，最终的显示效果也会偏淡，所以需要在::-moz-placeholder和:-moz-placeholder的规则中显式设置opacity: 1，才能保证颜色和我们设置的一致。
选择器的优先级问题
如果页面中已经有针对input的样式设置，可能会出现placeholder样式被覆盖的情况，此时可以适当提升选择器的优先级，比如使用input[type="text"]::-webkit-input-placeholder这样的选择器，或者添加!important声明，不过!important建议优先通过提升选择器优先级的方式替代。
仅支持部分样式属性
placeholder伪类选择器目前仅支持部分CSS文本相关属性，除了color之外，还可以设置font-size、font-family、text-align等属性，但是不支持设置padding、margin等盒模型相关属性，也不支持设置背景样式。
实际使用示例
下面是一个完整的HTML和CSS示例，展示如何给文本输入框设置红色placeholder：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>placeholder颜色设置示例</title>
<style>
/* 设置placeholder为红色 */
input::-webkit-input-placeholder {
color: #ff0000;
}
input::-moz-placeholder {
color: #ff0000;
opacity: 1;
}
input:-moz-placeholder {
color: #ff0000;
opacity: 1;
}
input:-ms-input-placeholder {
color: #ff0000;
}
/* 输入框基础样式 */
input {
width: 300px;
height: 40px;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 4px;
font-size: 14px;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入用户名">
</body>
</html>
cssplaceholderinput_placeholder::-webkit-input-placeholder修改时间：2026-06-17 08:09:11