::placeholder样式不生效的根本原因是浏览器默认权重高及旧版浏览器需前缀；必须组合写全所有前缀并加!important，且Safari对font-size等属性限制严格，Vue/React中动态class无效。
为什么 ::placeholder 样式经常不生效
根本原因有两个：一是浏览器对伪元素的默认样式权重高，二是旧版浏览器（尤其是 Safari 和老 Edge）要求带前缀的写法，而现代 CSS 未覆盖全。单纯写 ::placeholder 在 Chrome 110+ 可能生效，但在 Safari 15.6、iOS 16 WebView 或某些 Electron 内核中大概率被忽略。
必须同时写全前缀 + 提高 CSS 权重
只加前缀或只加 !important 都不够。要组合使用，并确保选择器足够具体：
-
::placeholder（标准写法，Chrome/Firefox 新版本） -
::-webkit-input-placeholder（Safari、Chrome 旧版、iOS WebView） -
::-moz-placeholder（Firefox 18–51，单冒号且需opacity兼容） -
::-moz-placeholder（Firefox 52+，双冒号） -
::-ms-input-placeholder（IE10–11，已废弃但仍有存量）
每条规则都建议加 !important，否则容易被 UA 样式或框架默认样式覆盖。例如：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #999 !important;
font-size: 14px !important;
}
遇到 color 生效但 font-size 不生效怎么办
这是 Safari 的典型问题：它允许修改 color，但对 font-size、line-height 等属性限制更严，尤其在 input[type="search"] 或设置了 appearance: none 的场景下。
立即学习“前端免费学习笔记（深入）”；
- 避免对
::placeholder设置line-height或height，这些会被忽略 - 改用
font-size+padding调整视觉大小，而非依赖行高 - 若仍不生效，尝试给父容器加
transform: translateZ(0)触发硬件加速（Safari 偶尔因此修复渲染）
Vue/React 项目里动态 class 不影响 ::placeholder
因为 ::placeholder 是伪元素，不响应 class 切换。比如你用 :class="{ 'has-error': invalid }"，即使 .has-error::placeholder 存在，也不会自动生效——伪元素样式只在初始渲染时计算一次。
- 解决方案：用内联 style 绑定，如
:style="{ '--placeholder-color': invalid ? '#f00' : '#999' }"，再配合 CSS 变量：color: var(--placeholder-color); - 或用 JS 动态切换 class 到
根节点，确保所有前缀规则都覆盖该 class - 注意：Tailwind 默认不生成
::placeholder变体，需手动启用placeholderColor插件或写placeholder:text-red-500（v3.3+）
::-moz-placeholder 和 ::-moz-placeholder），以及 Safari 下对 font-size 的静默忽略——这两点不验证就上线，用户一反馈就是“iOS 上占位符太小看不清”。 
