只写::placeholder会失效，因Chrome 57前、Firefox 18–19、IE 10–11等旧浏览器不支持标准写法，需补全-webkit-、-moz-、-ms-等前缀才能兼容；现代浏览器虽支持，但企业内网等旧环境仍需前缀。
直接用 ::placeholder 就能改颜色，但只写这一条在老浏览器里会失效，必须补全前缀才能真正生效。
为什么只写 ::placeholder 会失效
Chrome 57 之前、Firefox 18–19、IE 10–11 都不认标准写法，各自用不同前缀。现代浏览器虽已支持 ::placeholder，但项目若需兼容旧环境（比如企业内网系统），漏掉前缀就等于样式白写。
-
::-webkit-input-placeholder覆盖 Chrome/Safari/Edge（旧版） -
::-moz-placeholder和::-ms-input-placeholder分别对应 Firefox 18–19 和 IE 10–11 - Firefox 19+ 开始支持双冒号，但单冒号
:-moz-placeholder仍要保留，否则 18–19 版本完全不生效 - 别用
!important强顶——原生 placeholder 不响应它，除非目标元素自己也加了!important
::placeholder 支持哪些属性
它不是真实 DOM 节点，只能改文本相关样式，盒模型类属性基本无效。
- 能用：
color、font-size、font-family、opacity、line-height、text-align、letter-spacing、text-transform - 不能用：
padding、margin、display、width、height、border（部分浏览器会忽略，不报错但没效果） -
line-height要小心：如果 input 本身设了line-height，又没在::placeholder里重置，Safari 容易把文字压偏或截断
实际写法建议（复制即用）
按选择器分组写，避免重复声明；input 和 textarea 一起处理更省事。
立即学习“前端免费学习笔记（深入）”；
input::placeholder,<br>textarea::placeholder {<br> color: #999;<br> font-size: 14px;<br> opacity: 0.7;<br>}<br>input::-webkit-input-placeholder,<br>textarea::-webkit-input-placeholder {<br> color: #999;<br> font-size: 14px;<br> opacity: 0.7;<br>}<br>input::-moz-placeholder,<br>textarea::-moz-placeholder {<br> color: #999;<br> font-size: 14px;<br> opacity: 0.7;<br>}<br>input:-ms-input-placeholder,<br>textarea:-ms-input-placeholder {<br> color: #999;<br> font-size: 14px;<br> opacity: 0.7;<br>}
- 别用通配符如
*::placeholder，它不匹配任何元素 - 如果用了 UI 框架（如 Ant Design），先确认它是否封装了 input 并禁用了原生 placeholder 样式——此时得查框架文档，或改用其提供的 API 控制
- 暗色模式下记得加
@media (prefers-color-scheme: dark)调整color值，否则浅灰文字在黑底上可能看不清
Vue/React 里样式不生效的常见原因
不是框架限制，是 CSS 作用域机制导致的误判。
- scoped style 或 CSS Modules 下，
::placeholder伪元素不会自动带上生成的 hash class，必须显式穿透，例如 Vue 中写input::placeholder :deep({})（取决于你用的构建工具） - React 中若用 styled-components，需用
&::placeholder写法，否则样式不挂载到真实 DOM 上 - 最稳妥的方式：把占位符样式写在全局 CSS 文件里，避开作用域干扰
真正容易被忽略的是字体继承问题——父级设了 font-family，但 ::placeholder 不一定继承，必须显式声明；还有 Safari 对 line-height 的渲染偏差，不实测很容易上线才发现文字贴顶或下沉。
