直接写color: red对placeholder无效，因其是独立渲染的伪元素，不继承input文本样式，必须用::placeholder伪元素并补全浏览器前缀（如::-webkit-input-placeholder）配合opacity:1等属性才能生效。
因为 color 属性只作用于用户输入的文本，不控制 placeholder —— 它是独立渲染的伪内容，不是 DOM 节点，也不继承父级文本样式。
为什么直接写 color: red 对 placeholder 无效
浏览器把 placeholder 当作一个独立的伪元素（类似 ::before），它的样式链和 input 的文本完全分离。哪怕你给 input 设置了 color: #ff6b6b，占位符仍显示默认灰（比如 rgba(0,0,0,0.45)）。这不是 bug，是规范行为。
DevTools 里能看到 ::placeholder 被划掉？说明它被更高优先级规则覆盖了，或者压根没匹配上。
::placeholder 的正确写法与浏览器兼容性
必须用双冒号语法 ::placeholder，单冒号 :placeholder 已淘汰。现代浏览器基本支持，但旧版 Safari（15.4 之前）、IE、Firefox 仍需前缀：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
input::-webkit-input-placeholder：Chrome、Edge（Chromium）、Safari 9–15.3 -
input::-moz-placeholder：Firefox 19+ -
input::-ms-input-placeholder：IE10–11 -
input::placeholder：标准写法，放最后，方便未来清理
别只写 ::-webkit-input-placeholder —— 在新版 Safari 或 Firefox 里会失效。
常见失效原因和排查步骤
样式写了却没反应？先确认这几件事：
- 没用
class或ID提升选择器优先级，比如input.search-box::placeholder比input::placeholder更不容易被框架样式覆盖 - 用了
all: unset或appearance: none却没补color，会清掉伪元素样式 - UI 框架（如 Ant Design、Bootstrap）主动重置了
::placeholder，例如设成color: #6c757d或opacity: 0.5 - 在 Vue 的
<style scoped></style>或 CSS-in-JS 环境中，::placeholder被隔离，得用:deep()或提全局样式 - 漏写了
opacity: 1—— 某些 Chrome 版本会把 placeholder 渲染得过淡，显式声明可避免
::placeholder 支持哪些样式
它只接受有限的文本类属性：
- ✅ 可用：
color、font-size、font-family、font-weight、text-transform、opacity - ❌ 不可用：
background（部分旧 Safari 报错）、border、transform、padding、margin
想加粗或变细字体？可以，但别指望给占位符加背景色或圆角边框——那些属于盒模型，伪元素不支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
