bootstrap 会重置 ::placeholder 样式，导致自定义颜色失效；需用更高特异性选择器（如 .form-control::placeholder）、补全各浏览器前缀并显式设置 opacity 才能可靠覆盖。
Bootstrap 默认会重置 ::placeholder 样式，直接写 input::placeholder { color: red; } 很可能不生效——不是你写错了，是框架 CSS 优先级更高或显式覆盖了它。
为什么 Bootstrap 下 ::placeholder 样式被忽略
Bootstrap 5+（尤其是使用 Sass 编译的版本）会在 _forms.scss 中主动定义 input::placeholder，例如设为 color: #6c757d 并带 opacity: 0.5。它的选择器可能是 .form-control::placeholder 或更宽泛的 input::placeholder，且加载顺序靠后，导致你的自定义规则被覆盖。
- 在 DevTools 中检查
::placeholder节点，如果属性名被划掉（strike-through），说明被更高优先级规则覆盖 - Bootstrap 还可能对
.form-control设置了color，而某些旧版 Firefox 不继承该值到::placeholder，进一步加剧“没反应”错觉 - 如果你用的是 CDN 版本，它通常已压缩合并，无法直接修改源文件，必须靠覆盖策略
如何可靠覆盖 Bootstrap 的 placeholder 颜色
核心是提升选择器特异性，并补全浏览器前缀以兜底旧环境（尤其企业内网仍存 IE11 或老 Safari）：
- 不用
!important—— 它在部分旧 Safari 中对伪元素无效，且破坏可维护性 - 改用
.form-control::placeholder或input.form-control::placeholder，比 Bootstrap 原生选择器权重大 - 必须同时声明标准语法和前缀：Chrome/Safari 旧版靠
::-webkit-input-placeholder，IE10–11 靠::-ms-input-placeholder，Firefox 18–19 靠::-moz-placeholder - 显式设置
opacity: 0.7（不要依赖默认值），避免 Firefox 渲染过淡
input.form-control::placeholder,
textarea.form-control::placeholder {
color: #999;
opacity: 0.7;
}
input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
color: #999;
opacity: 0.7;
}
input.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder {
color: #999;
opacity: 0.7;
}
input.form-control::-ms-input-placeholder,
textarea.form-control::-ms-input-placeholder {
color: #999;
opacity: 0.7;
}
深色模式下 placeholder 颜色怎么同步变
Bootstrap 自身不自动适配暗色主题下的 ::placeholder，需手动配合 @media (prefers-color-scheme: dark) 或 CSS 变量：
- 若项目已用
:root { --bs-body-color: #212529; }类变量，可定义--bs-placeholder-color: #6c757d;并在媒体查询中更新 - 直接写媒体查询时，注意把所有前缀版本都包进去，否则 Safari 暗色模式下可能回退到浅色样式
- 别只在 DevTools 里点“模拟暗色模式”就认为 OK —— 真机 iOS Safari 对
prefers-color-scheme的响应有延迟，需实测
用 Tailwind 或 styled-components 时的特殊处理
Tailwind 默认不支持 dark:placeholder:text-gray-500 这类变体，除非你手动在 tailwind.config.js 中扩展；styled-components 则容易因模板字符串解析失败导致 ::placeholder 规则丢失：
- Tailwind 用户：确保根元素有
class="dark"，并在配置中启用darkMode: 'class'，再用dark:placeholder:text-gray-500 - styled-components 用户：不要在插值中写
css`::placeholder { color: ${color} }`—— 冒号会被误解析；改用独立css块或外部 CSS 文件引入 - 所有方案都绕不开一点：
::placeholder不是真实 DOM 元素，不能用 JS 直接操作 style 属性，也不能通过style=""内联设置
最易被忽略的点是：占位符颜色失效，90% 不是语法问题，而是被框架 CSS 覆盖或浏览器前缀缺失；而剩下 10%，往往卡在 opacity 和 color 没协同调整，导致视觉上“像没变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
