最常见原因是没写全浏览器前缀或未添加placeholder属性；::placeholder仅美化已有placeholder="xxx"的input/textarea，不生成文字，且只支持color、font-size、opacity等文本类样式，禁用background、padding等盒模型属性。
input::placeholder 为什么写了没反应
最常见原因是没写全浏览器前缀，或者根本没加 placeholder 属性。::placeholder 只作用于已有 placeholder="xxx" 的 input 或 textarea 元素，它不生成文字，只美化。
必须同时写这四套规则才稳妥：
-
input::placeholder（现代标准，Chrome 57+ / Firefox 51+ / Safari 10.1+ / Edge 79+） -
input::-webkit-input-placeholder（旧 Chrome/Safari/Opera） -
input::-moz-placeholder（Firefox 19+；注意 Firefox 18 只认单冒号，但已可忽略） -
input:-ms-input-placeholder（IE10–11）和input::-ms-input-placeholder（Edge 12–18）
漏掉任意一条，对应环境里就退回默认浅灰色，且不会报错——你只能靠真机或模拟器验证。
::placeholder 能设哪些样式
它不是普通元素，浏览器只允许极有限的文本类属性生效，其他会被静默丢弃。
立即学习“前端免费学习笔记（深入）”；
✅ 明确支持的：
-
color、font-size、font-family、font-weight -
opacity（设opacity: 1可避免某些浏览器默认降透明度） -
text-align（对textarea有效，input中无效） -
line-height：不能单独写，必须塞进font简写里，比如font: 14px/1.4 "Segoe UI", sans-serif
❌ 绝对禁用的（写了也白写）：
-
background、padding、margin、border -
display、visibility、height、width -
content（伪元素本身不支持，别想往里塞图标或额外文字）
为什么明明写了 color 却还是灰色
大概率是权重不够，或被父级 color 继承覆盖。::placeholder 继承性极弱，又容易被更宽泛的选择器压住。
解决办法：
- 用精确选择器链提高权重，比如
.form-control input::placeholder，而不是只写input::placeholder - 如果父容器设了
color: #333，就在 ::placeholder 里显式重写color: #999 - 别用
*::placeholder这种泛选器——它无效 - PostCSS 不会自动补全 ::placeholder 前缀，必须手写
textarea 和 contenteditable div 怎么处理
textarea 和 input 一样，支持全部四套 ::placeholder 规则，写法一致，只需把 input 换成 textarea。
但 div[contenteditable] 没有原生 placeholder 属性，也不能用 ::placeholder。想实现类似效果，得用 :empty::before + content: attr(placeholder)：
div[contenteditable]:empty::before {
color: #999;
content: attr(placeholder);
pointer-events: none;
}
注意：contenteditable 元素要确保初始为空（无空格、无换行），否则 :empty 不匹配；pointer-events: none 是为了不让占位文字拦截光标点击。
真正容易被忽略的是：::placeholder 的兼容边界比你想的更窄——IE10–11 和旧 Edge 仍广泛存在于政企内网，漏掉 -ms- 前缀，那一块用户看到的就是原始灰字。
