::placeholder是现代浏览器中唯一可靠、语义正确的占位符样式方案，Chrome 57+、Firefox 52+、Safari 10.1+、Edge 79+原生支持；它不继承父级color，仅接受color、font-size、opacity等文本属性，不支持background、border等盒模型属性，且必须显式声明，不可用内联style或错误写法:placeholder。
::placeholder 是唯一可靠、现代且语义正确的方案，直接写它就能覆盖绝大多数当前活跃浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 79+）。别再用 :placeholder（少一个冒号）、* { color: … } 或内联 style，它们都不起作用。
为什么 color 属性对占位符完全无效
CSS 的 color 是作用于「用户输入内容」的，而占位符文字是浏览器渲染层动态插入的虚拟节点，不属于 DOM 子树，也不继承父级文本样式。即使你给 input 设置了 color: #f00，占位符仍会固执地显示默认灰黑——这不是 bug，是规范行为。
- 必须用伪元素显式选中：
input::placeholder或textarea::placeholder -
::placeholder不支持background-color、border、margin等盒模型属性，只接受文本类声明（color、font-size、opacity、font-style） - 在 Vue 的
<style scoped>或 React 的 CSS-in-JS 中，::placeholder可能被隔离失效，需改用:deep()（Vue）或全局注入（React）
::placeholder 兼容写法怎么组织才不翻车
虽然标准写法已覆盖 98%+ 的真实用户设备，但 iOS Safari 15.3 及更早版本（尤其旧款 iPhone）仍需 ::-webkit-input-placeholder；IE11 则依赖 :-ms-input-placeholder。关键不是“全都要”，而是写法顺序和权重控制：
- 把标准写法
input::placeholder放最前面，作为主干 - WebKit 版本单独成行，放在后面（避免某些 PostCSS 插件误删）
- Firefox 要加
opacity: 1，否则默认透明度会被压低（::-moz-placeholder必须带这个） - 不要用
!important—— 它容易和组件库（如 Ant Design、Element Plus）的全局 placeholder 规则冲突
input::placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
input::-moz-placeholder {
color: #999;
opacity: 1;
}
input:-ms-input-placeholder {
color: #999;
}暗色模式、动态状态、可访问性怎么一起处理
占位符颜色不能写死。深色背景下用 #999 就是隐形的；表单校验失败时还保持灰色，用户根本看不出提示是否有效。真正的难点不在语法，而在上下文响应：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-color-scheme: dark)重置颜色，例如color: #666，别指望系统自动切换 - 状态切换必须靠 class，比如
.error-input::placeholder { color: #d32f2f; }，模板里写:style="{ placeholder: '…' }"无效 - WCAG 2.1 要求占位符与背景对比度 ≥ 4.5:1，
#999在白色背景上刚好达标，#ccc就不合格——别图省事 - Android WebView 和部分国产浏览器对
rgba()支持不稳定，优先用十六进制 +opacity组合，而非color: rgba(0,0,0,0.4)
最容易被忽略的是：占位符的 font-size 和 line-height 实际由父 input 决定，但渲染偏移常被归咎于伪元素本身。调样式前先确认 input 的 padding 和 box-sizing 是否一致——否则再准的 ::placeholder 规则也救不回错位文字。
