必须用::placeholder伪元素设置占位符颜色，因placeholder是独立渲染的伪内容，不继承input的color样式，且color仅控制用户输入文本；直接写input{color:red}对占位符无效。
为什么color直接写在input上没用
因为placeholder是浏览器渲染的独立伪内容，不是真实文本节点，也不继承input的color。你写input { color: #ff6b6b; }，用户输入的文字会变红，但占位符还是默认灰（比如#999或rgba(0,0,0,0.45)）。这不是 bug，是规范行为——color只管用户输入，不管 placeholder。
::placeholder被划掉？优先级和覆盖是主因
打开 DevTools，选中input，在“Styles”面板里找::placeholder规则，如果被 strikethrough，说明它被更高优先级样式干掉了。常见干扰源：
- 全局重置如
* { all: unset; }或input { appearance: none; }，会清掉伪元素渲染通道 - UI 框架（比如 Bootstrap、Ant Design）自带的
input::placeholder { color: #6c757d; opacity: 0.5; } - 标签选择器
input { color: #333; }虽不直接影响 placeholder，但某些旧引擎下会意外干扰继承链 - 用了
!important的其他规则，尤其在 scoped style 或 CSS-in-JS 环境里容易漏掉:deep()包裹
解决办法：把选择器写具体点，比如input.search-input::placeholder，或者临时禁用所有外部 CSS 验证是否真无效。
兼容性断层：Safari、IE、旧 Edge 需要前缀
标准::placeholder在 Chrome 57+、Firefox 51+、Edge 79+ 没问题，但 Safari ≤ 15.3 只认::-webkit-input-placeholder，IE11 只支持::-ms-input-placeholder，Firefox 18–19 还要:-moz-placeholder（单冒号）。三者必须分开写，不能合并成逗号选择器——否则旧引擎整条规则失效。
推荐写法（顺序不重要，但标准版放最后方便未来清理）：
input::placeholder { color: #666; opacity: 1; }
input::-webkit-input-placeholder { color: #666; opacity: 1; }
input::-moz-placeholder { color: #666; opacity: 1; }
input::-ms-input-placeholder { color: #666; opacity: 1; }
注意：opacity: 1不能省——Firefox 默认opacity是0.53，Safari 对rgba() alpha 通道不敏感，靠opacity调更稳。
字体、透明度、深色模式这些细节容易翻车
::placeholder只接受有限样式，别碰padding、background-color、border，它们会被静默忽略。真正要注意的是：
-
font-family不会自动继承，必须单独声明，否则回退到系统默认字体 -
line-height若和input自身值冲突，Safari 容易把文字压到顶部，建议显式设line-height: normal - 深色模式下 placeholder 颜色得手动适配：
@media (prefers-color-scheme: dark) { input::placeholder { color: #666; } } - CSS 变量要在
:root定义并显式调用：color: var(--placeholder-color, #999);，伪元素不继承 inline style 里的--xxx
最常被忽略的其实是opacity和font-family这两项——颜色看着设对了，但文字发虚或字体突兀，八成是它们没显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
