直接写 color 对 placeholder 无效，因为 placeholder 是浏览器独立渲染的伪内容，不继承 input 的 color 样式，必须用 ::placeholder 伪元素显式设置 color 和 opacity:1，并补全浏览器前缀以确保兼容性。
直接写 color 对 placeholder 无效
给 input 元素设置 color: red，只会改变用户输入的文字颜色，placeholder 文字依然显示默认灰（比如 #999 或 rgba(0,0,0,0.45)）。这不是浏览器 bug，而是规范行为——placeholder 是浏览器渲染的独立伪内容，不继承 input 的文本样式，也没有对应 DOM 节点。
DevTools 里看到 ::placeholder 规则被划掉？大概率是被更高优先级样式覆盖，或者没写对选择器。
- 内联样式（如
style="color:red"）对placeholder完全不起作用 -
placeholderstyle这类自定义属性 HTML 不识别，也不会生效 - Vue 的
<style scoped></style>或 CSS-in-JS 会隔离伪元素，得用:deep(::placeholder)或提全局样式
::placeholder 伪元素必须显式声明
要改颜色，必须用 ::placeholder 伪元素，且建议补全主流浏览器前缀，尤其还要加 !important——部分浏览器内置样式权重高，不加容易被压。
标准写法应按顺序排列（前缀在前，标准在后）：
input::-webkit-input-placeholder { color: #666 !important; }
input::-moz-placeholder { color: #666 !important; }
input:-ms-input-placeholder { color: #666 !important; }
input::placeholder { color: #666 !important; }
-
::-webkit-input-placeholder：Chrome、Safari、新版 Edge 和 Opera -
::-moz-placeholder：Firefox 19+ -
:-moz-placeholder：Firefox 4–18（注意是单冒号） -
:-ms-input-placeholder：IE 10–11
::placeholder 支持哪些样式？
它只接受有限的文本类属性，盒模型基本无效：
- ✅ 可用：
color、font-size、opacity、font-style、text-transform - ❌ 不可用：
background-color、padding、border、display、content
opacity 默认值因浏览器而异（Firefox 常为 0.53），不显式设 opacity: 1 容易导致文字发虚；font-family 也不会自动继承父级，必须单独声明，否则可能回退到系统默认字体。
暗色模式下 placeholder 看不清怎么办
写死 color: #999 在深色背景上会糊成一片。必须配合媒体查询响应：
@media (prefers-color-scheme: dark) {
input::placeholder {
color: #666 !important;
}
}
- 别只依赖 Chrome DevTools 的“模拟暗色模式”，真机 Safari 对
prefers-color-scheme的触发更严格 - 如果用了 CSS 变量（如
--placeholder-color），记得在媒体查询里也更新变量值，否则变量不会自动切换 -
type="number"在某些 Chrome 版本中会忽略::placeholder，临时解法是换type="text"+ JS 校验
真正容易被忽略的是：placeholder 文字的垂直居中逻辑由浏览器控制，无法通过 line-height 或 padding 精确调整，不同浏览器表现可能不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
