::placeholder 样式常因浏览器兼容性断层失效，旧版 Safari、IE、旧 Edge 需私有前缀；仅支持有限文本样式，不响应 :focus 或暗色模式自动切换，需媒体查询或 CSS 变量兜底。
直接写 ::placeholder 在现代浏览器里能改颜色，但只写这一条，Safari 旧版、IE、部分企业内网环境里的用户根本看不到效果——它不是“不生效”，是压根不识别。
为什么 ::placeholder 样式经常不生效
最常被忽略的是浏览器兼容性断层：Chrome 57+、Firefox 51+、Edge 79+ 支持标准双冒号写法，但 Safari 15.4 之前（包括绝大多数 iOS 用户）、IE 10–11、旧版 Edge 都不认 ::placeholder。它们各自依赖私有前缀：
-
::-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 里看到 ::placeholder 规则被划掉？大概率是全局样式或 UI 框架（如 Ant Design）用更高优先级规则重置了它，比如 input { color: #333; } 就可能意外覆盖伪元素的继承行为。
::placeholder 支持哪些 CSS 属性
它不是真实 DOM 元素，而是渲染层的文本投影，所以只接受有限的文本类样式：
立即学习“前端免费学习笔记（深入）”；
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
- 能用：
color、font-size、font-family、font-weight、opacity、line-height、text-transform、letter-spacing - 不能用：
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>会给选择器自动加属性，比如input::placeholder变成input[data-v-xxx]::placeholder，但浏览器不支持带属性的选择器匹配伪元素 —— 必须用:deep(input::placeholder)显式穿透 - React + CSS Modules 里，得用
:global(input::placeholder)包裹规则，否则样式不会输出到 DOM - 某些 UI 库（如 Element Plus）封装了
<el-input>并禁用了原生placeholder，此时改::placeholder完全无效，得查文档看是否提供placeholder-style类似 prop
别在模板里写 :style="{ 'color': placeholderColor }" —— style 属性对伪元素零作用。
暗色模式下占位符看不清的补救方式
::placeholder 不响应系统主题切换，prefers-color-scheme 媒体查询是唯一可靠手段：
- 不要写死
color: #999，改用变量或媒体查询兜底：@media (prefers-color-scheme: dark) { input::placeholder { color: #666; } } - 如果项目已用 CSS 变量（如
--placeholder-color），必须在媒体查询里同步更新变量值，否则变量本身不会随系统变 - 测试时别只信 Chrome DevTools 的“模拟暗色模式”：真机 Safari 对
prefers-color-scheme的触发有时延迟，Android Chrome 则可能忽略 meta 设置
真正容易被忽略的点是：placeholder 文字在聚焦后自动隐藏，所以不要写 :focus::placeholder 试图控制聚焦态样式——它永远不会匹配成功。需要“聚焦时隐藏占位符”的视觉效果，应通过 JS 清空 placeholder 属性，或用 input:focus::placeholder { color: transparent; } 这种 hack，但后者会影响可访问性。
