直接写::placeholder在safari旧版、ie等浏览器中不生效，因其不识别该伪元素，须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder四套规则，并设opacity:1统一firefox透明度，仅支持color等文本样式。
直接写 ::placeholder 在 Safari 旧版、IE、部分企业内网环境里根本不会生效——这不是样式没加载，是浏览器压根不识别这个伪元素。
为什么 ::placeholder 样式经常不显示
最常被忽略的是浏览器解析断层：Chrome 57+、Firefox 51+、Edge 79+ 支持标准双冒号写法，但 Safari 15.4 之前（包括大量 iOS 用户）、IE 10–11、旧版 Edge 都只认带前缀的私有版本。它们各自依赖：
-
::-webkit-input-placeholder：覆盖 Chrome 49–56、Safari 9–15.3、Opera -
::-moz-placeholder（单冒号）：对应 Firefox 18–19；::-moz-placeholder（双冒号）从 Firefox 20 起支持，但为保底仍建议保留单冒号写法 -
::-ms-input-placeholder：IE 10–11 唯一可用写法，双冒号且不可省略
DevTools 里看到规则被划掉？大概率是全局样式或 UI 框架（如 Ant Design）用更高优先级规则重置了它，比如 input { color: #333; } 就会意外覆盖伪元素继承行为。
::placeholder 支持哪些 CSS 属性
它不是真实 DOM 元素，而是渲染层的文本投影，只接受有限的文本类样式：
- 能用：
color、font-size、font-weight、line-height、text-transform、letter-spacing、opacity - 不能用：
padding、margin、background、border、display、width、height——多数浏览器静默忽略，不报错也不渲染 -
line-height要格外小心：如果input自身设了line-height: 2，而::placeholder没重置，Safari 容易把文字压到顶部或截断；建议显式写line-height: normal -
opacity比单纯调color更安全：Firefox 默认opacity是 0.53，不设就会比预期更淡；opacity: 0.7比color: #999更符合“弱提示”的设计语义
Vue/React 中 ::placeholder 失效怎么办
不是框架 bug，是 CSS 作用域机制天然隔离了伪元素：
- Vue 单文件组件的
<style scoped></style>会给选择器自动加属性，比如input::placeholder变成input[data-v-xxx]::placeholder，但浏览器不支持带属性的选择器匹配伪元素 —— 必须用:deep(input::placeholder)显式穿透 - React + CSS Modules 里，得用
:global(input::placeholder)才能生效 - 若用 Tailwind 或 UnoCSS 等原子化方案，需确认其预设是否已包含全前缀占位符规则；未包含时，仍需手写补充
兼容性写法必须四者齐备
仅写 input::placeholder 是无效兜底。以下是最小可行集合，可直接复用：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #999;
font-size: 14px;
font-weight: 400;
opacity: 1;
}
注意：opacity: 1 很关键——Firefox 默认将 placeholder 设为半透明（opacity: 0.54），不重置会导致颜色变浅、风格不一致。如果项目用了 CSS 变量管理主题色，可改用 color: var(--placeholder-color) + opacity: 1 组合，避免硬编码。
真正容易被忽略的点是：哪怕写了全部四条，只要其中任意一条语法错误（比如漏了分号、引号不闭合、用了中文标点），整个规则块在部分浏览器中都会静默失效——务必用 DevTools 的「Styles」面板逐条验证是否被加载、是否被划掉、是否被覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
