不能用color属性直接改占位符颜色，必须用::placeholder伪元素，因为placeholder是独立渲染的伪内容，不继承input的color样式，且无dom节点，只能通过伪元素匹配；color仅控制用户输入文本，对placeholder无效。
不能用 color 属性直接改占位符颜色，必须用 ::placeholder 伪元素，否则样式无效。
为什么 color 属性对 placeholder 没作用
color 只影响用户输入的文本，placeholder 是独立渲染的伪元素，浏览器不把它当作普通文本内容处理。写 input { color: red; } 后 placeholder 还是默认灰（比如 #999 或 rgba(0,0,0,0.45)），这不是 bug，是规范行为。
- 检查 DevTools 中
::placeholder是否被划掉——说明被更高优先级规则覆盖 - 别在
style属性里尝试placeholderstyle，HTML 不识别这个属性，也不支持内联样式控制伪元素 - 如果用了 Vue 的
<style scoped></style>或 CSS-in-JS，::placeholder可能被隔离失效，得用:deep()或提全局样式
::placeholder 的可用样式和限制
它只接受有限的文本类样式，盒模型属性基本无效：
- ✅ 支持：
color、font-size、opacity、font-style、text-transform - ❌ 不支持：
background-color、padding、border、display、content -
opacity默认值因浏览器而异（Firefox 常设为 0.53），建议显式写opacity: 1避免文字“看不清” - 字体不会自动继承父级
font-family，必须单独声明，否则可能回退到系统默认字体
兼容旧版 Safari 和 IE 的写法
现代项目可只写 ::placeholder，但若需支持 Safari ≤14 或 IE11，得补前缀：
- Chrome / Edge / 新版 Safari：用
input::placeholder - Safari ≤14 / 旧版 Chrome：加
input::-webkit-input-placeholder - Firefox 18–50：用
input::-moz-placeholder（注意是单冒号） - IE 10–11：用
input:-ms-input-placeholder - 前缀规则建议放在标准写法之前，且都带
!important——部分浏览器内置样式权重高，不用!important容易被压
暗色模式下 placeholder 看不清怎么办
写死 color: #999 在深色背景上会糊成一片，得靠媒体查询响应：
- 用
@media (prefers-color-scheme: dark)单独重置::placeholder颜色，比如color: #666 - 如果用了 CSS 变量（如
--placeholder-color），记得在媒体查询里也更新变量值，否则变量不自动切换 - 别只依赖 Chrome DevTools 的“模拟暗色模式”，真机 Safari 对
prefers-color-scheme的触发时机更严格 -
type="number"在某些 Chrome 版本中会忽略::placeholder，临时解法是换type="text"+ JS 校验
真正容易被忽略的是：placeholder 文字垂直居中依赖 line-height 和 padding 匹配，而不是单纯调 font-size；很多错位问题其实出在父级排版没控好，不是伪元素本身的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
