现代浏览器统一支持::placeholder伪元素，但需注意仅对可编辑表单控件生效、必须双冒号、不可继承color；Safari旧版需::-webkit-input-placeholder；IE10–11需::-ms-input-placeholder；优先级和继承差异是常见问题。
Chrome/Firefox 中用 ::placeholder 设置颜色
现代浏览器（Chrome 57+、Firefox 52+、Edge 16+）统一支持 ::placeholder 伪元素，但必须注意：它只作用于 <input type="search"> 或 <input type="text"> 等可编辑表单控件，对 <textarea></textarea> 同样有效。直接写 ::placeholder 即可，无需前缀。
常见错误是漏掉双冒号（写成 :placeholder），那在新标准下完全不生效；或者误以为它能继承父级 color，其实不会——必须显式声明。
input::placeholder {
color: #999;
font-size: 14px;
}
如果同时想控制透明度，推荐用 rgba() 而非 opacity，后者会让整个占位符文字带“毛边感”，且可能意外影响其他伪元素。
Safari 和旧版 Edge 需要 ::-webkit-input-placeholder
Safari 15.4 之前（包括所有 iOS Safari）、旧版 Edge（≤15）不识别标准 ::placeholder，必须用 WebKit 前缀版本。这个伪类名不能简写，也不能混用其他前缀（比如 ::-moz-placeholder 已废弃多年，别再用）。
立即学习“前端免费学习笔记（深入）”；
关键点：WebKit 版本必须单独写，且要放在标准写法之后（CSS 层叠规则决定后声明的会覆盖前声明的，但实际中两者互不干扰，只是确保兼容性兜底）。
input::placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
注意：Safari 15.4+ 已支持标准 ::placeholder，但 iOS 用户大量停留在旧系统，所以前缀写法仍需保留。
IE10–11 只认 ::-ms-input-placeholder
IE10/11 完全不支持 ::placeholder，也不吃 WebKit 前缀，必须用微软私有语法 ::-ms-input-placeholder。它只在 IE 下生效，不影响其他浏览器。
容易踩的坑：有人把 :-ms-input-placeholder（单冒号）当正确写法，其实 IE10+ 要求双冒号；另外，这个伪元素不支持部分 CSS 属性，比如 background、border 会被忽略，仅 color、font 类属性可靠。
input::-ms-input-placeholder {
color: #999;
}
如果你项目已放弃 IE 支持，这行可以删掉；但若还需兼容，就别省略——否则 IE 下占位符会沿用默认灰黑色，和设计稿严重不符。
颜色失效？检查是否被 !important 或更高优先级规则覆盖
最常被忽略的是样式优先级问题：::placeholder 的权重和普通类选择器一样（0,1,0），一旦你写了 .search-box input { color: #333; }，它不会影响占位符；但如果你写了 .search-box input::placeholder { color: #333 !important; }，又在全局 CSS 里有一条 input::placeholder { color: #999; }，那 !important 就会强制覆盖。
- 优先排查是否有更具体的选择器（如
#header input::placeholder）覆盖了你的规则 - 避免在占位符样式里滥用
!important，它会让调试变得不可预测 - 用浏览器开发者工具的“Computed”面板，直接看哪条
color生效了，比猜快得多
真正难搞的不是写法，而是不同浏览器对伪元素继承行为的细微差异——比如 Safari 有时会把父级 font-family 漏传给 ::placeholder，这时就得单独声明一遍。
