如何用CSS的placeholder伪元素修改占位文字样式？

::placeholder伪元素仅美化已通过placeholder属性设置的占位文字，不生成内容；必须手写四套浏览器前缀（::-webkit-input-placeholder、::-moz-placeholder、:-moz-placeholder、:-ms-input-placeholder）才兼容各环境，仅支持color、font-size、opacity等有限文本样式，禁用background、padding等盒模型属性。

::placeholder 伪元素本身不生成文字，只美化已通过 placeholder 属性定义的内容；没写 placeholder="xxx"，再全的 CSS 也出不来任何占位文字。

必须手写四套前缀，PostCSS 不会补全

现代浏览器支持 ::placeholder，但 Chrome ≤56、Firefox ≤19、IE 10–11、Edge ≤18 都不认它。漏掉任意一套，对应环境里就退回默认灰黑色小字。

1. input::-webkit-input-placeholder：覆盖 Chrome 49–56、Safari 9–15.3、Opera
2. input::-moz-placeholder 和 input:-moz-placeholder（单冒号）：分别对应 Firefox 20+ 和 18–19，建议都写
3. input:-ms-input-placeholder：IE 10–11 唯一有效写法
4. input::placeholder：Chrome 57+ / Firefox 51+ / Safari 10.1+ / Edge 79+

别用 *::placeholder 这种泛选器——它无效；也别指望 PostCSS 插件自动加前缀，必须手动补全。

能设的样式非常有限，设了也白设的属性要避开

::placeholder 不是真实 DOM 元素，而是渲染层的文字投影，浏览器只允许它响应部分文本类属性。设了禁用属性不会报错，但会被静默丢弃，调试时容易卡住。

1. ✅ 支持：color、font-size、font-family（需显式声明，不继承父级）、opacity（Firefox 默认 0.53，常需重置为 1）、text-align（对 textarea 有效）
2. ❌ 禁止：background、padding、margin、border、width、height、display、visibility
3. ⚠️ 特别注意：line-height: 1.4 单独写无效；得塞进 font 简写里，比如 font: 14px/1.4 "Segoe UI", sans-serif

Vue/React 中样式失效？不是框架问题，是作用域机制导致

Vue 的 <style scoped> 会给选择器自动加属性，比如把 input::placeholder 变成 input[data-v-xxx]::placeholder，但浏览器根本不支持带属性的选择器匹配伪元素。

1. Vue 项目中必须用 :deep(input::placeholder) 显式穿透
2. React + CSS Modules 中得用 :global(input::placeholder) 包裹规则
3. 某些 UI 库（如 Element Plus、Ant Design）自带高优先级重置规则，比如 input { color: #333; }，会意外覆盖 ::placeholder 的继承行为，需提高选择器权重或显式重写 color

最常被忽略的点是：占位文字是否真的存在。检查 HTML 是否漏写了 placeholder 属性，再看浏览器是否在对应版本里识别你写的那条规则——这两步没确认，后面所有样式都是空中楼阁。