现代浏览器均原生支持::placeholder伪元素，Chrome 57+、Firefox 52+、Safari 10.1+无需加浏览器前缀即可直接使用。
Chrome/Firefox/Safari里改占位符颜色用::placeholder
直接写::placeholder就行，不用加浏览器前缀——现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）都原生支持。老版本Safari（::-webkit-input-placeholder，但除非还要兼容2016年的iOS，现在基本可以不考虑。
常见错误是写成:placeholder（少一个冒号），或者误以为它能继承父元素的color——它不会，必须显式声明。
- 只对
<input>和<textarea>生效，<select>不行 - 不能设置
background-color或border，仅限文字相关属性（color、font-size、opacity等） - 如果同时写了
::placeholder和::-webkit-input-placeholder，后者在WebKit内核下会覆盖前者，建议只留标准写法
::placeholder里opacity比color更安全
有些设计稿要求占位符“半透明灰色”，直接设color: rgba(0, 0, 0, 0.4)看似合理，但在部分Android WebView或旧版Edge里可能被忽略。用opacity: 0.4兼容性更好，且语义更准确——它就是用来控制“显示强度”的。
注意：opacity会影响整个伪元素，包括字体粗细和行高渲染，如果占位符文字看起来太“虚”，优先调低color的明度值（比如#999），而不是盲目压opacity。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
color: #999; opacity: 1;—— 清晰可控 - 避免：
color: rgba(0,0,0,0.3); opacity: 0.8;—— 叠加后不可预测 - 不要用
!important强行提权，容易和组件库的样式冲突
Vue/React里动态切换占位符颜色要小心CSS作用域
框架组件中常通过class切换主题（比如dark-mode），但::placeholder不响应父级class的继承变化——它只看当前元素自身的匹配规则。
所以别写.dark-mode ::placeholder { color: #666; }然后指望它自动生效。实际得确保该规则被正确注入，且没有被更高权重的全局样式覆盖。
- Vue单文件组件里，如果用了
<style scoped>，::placeholder选择器会被加上属性选择器，但部分老版vue-loader处理不稳，建议改用<style>全局块 - React中用CSS Modules时，同理：避免把
::placeholder写进模块化类名里，单独抽到全局CSS文件更稳妥 - 检查DevTools里该样式是否“被划掉”——常见原因是父选择器权重不够，或被
user agent stylesheet兜底规则压制
IE11不支持::placeholder，但没必要专门兼容
IE11用的是::-ms-input-placeholder，语法一样，但如果你项目已放弃IE支持（绝大多数新项目都如此），就别为它多写一行。强行加前缀反而增加维护成本，还可能干扰CSS压缩工具的去重逻辑。
真遇到必须兼容的场景，用PostCSS插件autoprefixer自动生成即可，配置里明确写"ie >= 11"，它会补全::-ms-input-placeholder和::-webkit-input-placeholder。
- 手动补前缀容易漏掉
::-moz-placeholder（Firefox旧版双冒号变单冒号的坑） - 不要混用标准写法和前缀写法在同一选择器块里，CSS解析器可能按顺序覆盖，行为不一致
- 上线前用BrowserStack快速扫一眼主流Android/iOS WebView，比盯着IE11更实际
最易被忽略的一点：占位符文字颜色在高对比度模式（Windows系统设置或iOS辅助功能开启时）会被强制重置，任何CSS都无法干预。如果产品有无障碍合规要求，得靠JS监听prefers-contrast媒体查询做降级提示，而不是死磕样式。
