必须手写四套浏览器前缀（::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder、::placeholder）才能兼容各环境，仅支持color等有限文本样式，不支持盒模型属性，且需确保HTML中已设置placeholder属性。
直接写 ::placeholder 在现代浏览器里能改颜色，但只写这一条，Safari 旧版、IE、部分企业内网环境里的用户根本看不到效果——它不是“不生效”，是压根不识别。
必须手写四套前缀，PostCSS 不会帮你补
Chrome ≤56、Safari ≤15.3、IE10–11、Edge 12–18 都不认 ::placeholder。漏掉任意一个前缀，对应环境就退回默认灰黑色：
-
input::-webkit-input-placeholder（Chrome 49–56 / Safari 9–15.3 / Opera） -
input::-moz-placeholder（Firefox 19+；注意 Firefox 18 只认单冒号:-moz-placeholder，但已可忽略） -
input:-ms-input-placeholder（IE 10–11）和input::-ms-input-placeholder（Edge 12–18） -
input::placeholder（Chrome 57+ / Firefox 51+ / Safari 10.1+ / Edge 79+）
别指望 PostCSS 自动补全——它基本不处理伪元素前缀。也别用 *::placeholder 这种泛选器，它无效；必须精确到 input::placeholder 或 textarea::placeholder。
能设的样式非常有限，设了也白设的属性要避开
::placeholder 不是真实 DOM 元素，而是渲染层的文本投影，只接受部分文本类样式：
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
color、font-size、font-family、font-weight、opacity、text-transform、letter-spacing - ❌ 禁止：
background、padding、margin、border、display、width、height、content - ⚠️ 特别注意：
line-height: 1.4单独写无效；得写成font: 14px/1.4 "Segoe UI", sans-serif才行
Vue/React 中样式失效？不是框架 bug，是作用域机制天然隔离
Vue 单文件组件的 <style scoped> 会给选择器自动加属性，比如 input::placeholder 变成 input[data-v-xxx]::placeholder，但浏览器不支持带属性的选择器匹配伪元素——必须用 :deep(input::placeholder) 显式穿透。
React + CSS Modules 里，得用 :global(input::placeholder) 包裹规则，否则样式不会输出到 DOM。
某些 UI 库（如 Ant Design、Element Plus）也会用高优先级规则重置 input 的 color，导致 ::placeholder 继承失败。务必用完整选择器链提高权重，比如 .form-control input::placeholder，并在里面显式重写 color 和 opacity。
最常被忽略的一点：没写 placeholder="xxx"，再全的 CSS 规则也出不来任何文字。伪元素只能美化，不能生成内容。
