直接写::placeholder可改颜色，但必须显式声明color且仅现代浏览器（Chrome 57+、Firefox 52+、Safari 15.4+）稳定支持；旧版需::-webkit-input-placeholder等前缀，否则不生效。
直接写 ::placeholder 就能改颜色，但必须显式声明 color，且现代浏览器（Chrome 57+、Firefox 52+、Safari 15.4+）才稳定支持——旧版 Safari 和 IE 需要额外前缀，否则样式完全不生效。
为什么 ::placeholder 写了却没反应
最常见原因是选择器被覆盖或浏览器根本不识别。DevTools 里如果看到该规则被划掉，基本就是这两类问题之一。
- 漏写双冒号：写成
:placeholder（单冒号）在所有现代浏览器中都无效 - 权重不够：全局 CSS 里有
input::placeholder { color: #6c757d; }且后加载，你的规则就会被盖掉；建议用更具体的选择器，比如input.search-input::placeholder - UI 框架重置：Bootstrap、Ant Design 等常带默认
::placeholder规则，且带!important，你得手动覆盖或提高特异性 -
all: unset或all: initial作用于input时，会清空伪元素样式，慎用
::placeholder 兼容性怎么兜底
如果你的用户还有 iOS 15.3 或更早、或需兼容 IE11，就不能只靠标准写法。各浏览器支持情况差异大，必须分层写：
- Safari ≤15.3、旧版 Chrome/Edge：必须加
input::-webkit-input-placeholder - Firefox 18–51：需
input::-moz-placeholder（注意是单冒号） - IE10–11：只认
input::-ms-input-placeholder（双冒号，不是:-ms-） - 现代浏览器统一支持
input::placeholder，建议放最前面，其他前缀版本跟在后面作为降级
推荐合并写法（避免重复）：
立即学习“前端免费学习笔记（深入）”；
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #999;
opacity: 1;
}
color 和 opacity 怎么配才不出错
只设 color 不够，因为不同浏览器对占位符默认透明度处理不一致——Chrome 可能渲染得偏淡，Firefox 又可能太实。两者必须协同控制。
- 别用
rgba()配opacity：比如color: rgba(0,0,0,0.3); opacity: 0.8;，叠加后不可控，尤其在 Android WebView 中易失效 - 优先调
color明度值：比如深色背景用color: #666;，浅色背景用color: #999;，再配opacity: 1保清晰 - 避免
opacity: 0：这会让占位符彻底消失，且部分表单校验逻辑依赖其可见性判断字段是否为空 -
font-family必须显式声明：它不继承父级，否则可能 fallback 到系统默认字体，和设计稿不符
暗色模式、框架里怎么动态换色
::placeholder 不响应父级 class 变化，也不继承 color，所以不能靠 .dark-mode input::placeholder 这种写法自动切换。
- 用
@media (prefers-color-scheme: dark)包裹规则，且确保根元素触发了系统主题（如<html class="dark">） - Vue 的
<style scoped>会为::placeholder加属性选择器，但老版 vue-loader 处理不稳定，建议抽到全局<style> - React + CSS Modules 同理：别把
::placeholder写进模块类名里，单独提全局 CSS 文件更可靠 - Tailwind 用户：用
dark:placeholder:text-gray-500，但要确认darkclass 已正确挂载到根节点
真正容易被忽略的是：伪元素样式无法通过 JS 的 style 属性设置，也不能用内联 控制——所有动态变色都只能靠 class 切换 + 预定义 CSS 规则。
