现代浏览器（Chrome 57+、Firefox 52+、Edge 16+）直接支持::placeholder伪元素，无需前缀；Safari 15.4前需加::-webkit-input-placeholder等兼容写法，且必须显式声明样式、不继承父级color。
Chrome/Firefox/Edge里直接用::placeholder就行
现代浏览器（Chrome 57+、Firefox 52+、Edge 16+）都支持标准的 ::placeholder 伪元素，不需要前缀。直接写样式就能生效：
input::placeholder {
color: #999;
font-size: 14px;
}
注意两点：一是必须用双冒号（::placeholder），单冒号（:placeholder）是旧规范，仅 Safari 早期版本部分支持，现在已不推荐；二是它只作用于 <input> 和 <textarea></textarea> 元素，对自定义组件里的模拟 placeholder 无效。
Safari 15.4之前要加::-webkit-input-placeholder
Safari 在 15.4 版本才开始支持标准 ::placeholder，更早版本（包括 iOS Safari）必须用 WebKit 前缀变体。如果你的项目还要兼容 Safari 15.3 或更老系统，得补上：
input::-webkit-input-placeholder {
color: #999;
}
input::-moz-placeholder {
color: #999;
}
input:-ms-input-placeholder {
color: #999;
}
input::placeholder {
color: #999;
}
顺序建议把标准写法放最后，避免被前缀规则意外覆盖；::-moz-placeholder 和 :-ms-input-placeholder 虽然已过时，但某些旧版 Firefox/IE 可能仍需兜底。
立即学习“前端免费学习笔记（深入）”；
::placeholder不支持所有CSS属性
它只接受有限的文本相关样式，很多常用属性会失效：
-
color、font-size、font-weight、line-height、text-align—— ✅ 支持 -
background-color、border、padding、margin—— ❌ 不支持（设了也无效） -
opacity可用，但会影响整个 placeholder 文本透明度，不是“隐藏”语义
如果想让 placeholder 看起来更淡，优先用 color 配低饱和度灰阶值（比如 #aaa），别依赖 opacity，否则在高对比度模式下可能完全看不见。
动态切换 placeholder 颜色容易踩坑
用 JS 动态改 class 或 style 时，别直接操作 element.style.color——这改的是 input 本身文字颜色，不是 placeholder。正确做法是：
- 预定义好 CSS 类（如
.dark-placeholder::placeholder { color: #333; }），再用el.classList.toggle() - 或通过
document.styleSheets注入新规则（适合主题频繁切换场景） - 避免用内联 style 控制 placeholder，因为
style属性无法影响伪元素
最常被忽略的一点：placeholder 样式不会继承父元素的 color，它始终需要显式声明；哪怕父级写了 color: red，::placeholder 依然默认是浅灰，这点和普通文本完全不同。
