::placeholder仅支持color和font相关属性，需写全厂商前缀并提高选择器权重，禁用background/padding/border/line-height等；动态样式须用css类或css变量控制。
Chrome/Firefox里::placeholder不生效？检查选择器优先级和继承限制
直接写 input::placeholder { color: #666; } 很可能没反应——不是语法错，是它被其他样式盖住了，或者父元素设置了color导致继承失效。这个伪元素默认继承性极弱，且浏览器对它的样式支持有明确限制：只接受color、font相关属性（如font-size、font-weight），background、padding、border一律忽略。
- 必须用完整选择器链提高权重，比如
.form-control input::placeholder而非单独input::placeholder - 如果父容器设了
color: #333，要显式重置input::placeholder { color: #999 !important; }（!important在这里合理） - Firefox 会把
opacity当作有效属性，Chrome 不认；统一用color控制明暗更稳妥
兼容老版本Edge和Safari？加厂商前缀不能少
Safari 14.1 之前、旧 Edge（EdgeHTML）根本不认标准 ::placeholder，必须补全前缀写法。漏掉任意一个，对应浏览器里占位文字就退回默认灰黑色，毫无定制效果。
- 必须同时写四行：
input::-webkit-input-placeholder（Chrome/Safari）、input::-moz-placeholder（Firefox）、input::-ms-input-placeholder（旧 Edge）、input::placeholder（现代标准） - 注意
::-moz-placeholder是双冒号，但 Firefox 18–19 只认单冒号:-moz-placeholder；实际项目中建议只保留双冒号写法，放弃极老版本 - 不要用 PostCSS 自动加前缀——它通常不处理伪元素前缀，得手写
想改字体大小或加图标？用font属性组合，别碰line-height
::placeholder 支持 font 简写，但不支持独立设置 line-height（设了也无效）。想让占位文字看起来更大更轻，得靠 font-size 和 font-weight 配合，而不是调行高。
- 正确写法：
input::placeholder { font: 14px/1.2 "Helvetica Neue", sans-serif; }（斜杠后是 line-height，这里能生效是因为在font简写里） - 错误写法：
input::placeholder { font-size: 14px; line-height: 1.2; }—— 后者会被浏览器静默丢弃 - 加图标？不行。伪元素不支持
content，也不能用background-image；真要图标，得用 JS 动态插入或换用label+span模拟
Vue/React里动态控制占位文字样式？别绑定style对象
在组件内用 :style="{ 'color': placeholderColor }" 绑定到 input 元素上，对 ::placeholder 完全无效——伪元素无法通过内联 style 属性控制。
立即学习“前端免费学习笔记（深入）”；
- 必须走 CSS 类名切换：
:class="{ 'has-error': isInvalid }"，然后在 CSS 里写.has-error input::placeholder { color: #d32f2f; } - 如果主题色动态变化（比如深色模式），用 CSS 自定义属性更可靠：
input::placeholder { color: var(--placeholder-color, #aaa); }，再用 JS 改document.documentElement.style.setProperty('--placeholder-color', '#777'); - 服务端渲染（SSR）时注意：CSS-in-JS 库如 Emotion 可能不自动提取伪元素规则，得手动确保样式提前注入
最常被忽略的是：所有浏览器都禁止通过 ::placeholder 修改尺寸以外的盒模型属性。哪怕你写了 padding-left，它就在那儿，只是不起作用——这不是 bug，是规范限定。
