bootstrap 5 中需用兼容性伪元素（::placeholder、::-webkit-input-placeholder等）显式设置placeholder颜色，因默认不接管；sass中可修改$input-placeholder-color变量；深色模式下需配合[data-bs-theme="dark"]或prefers-color-scheme调整透明度。
bootstrap 5 中直接用 ::placeholder 伪元素修改颜色最可靠
bootstrap 5 默认不接管 placeholder 的颜色控制，它依赖浏览器原生样式，所以不能靠覆盖 .form-control 的 color 属性来改——那只会改输入框内文字色，不影响占位符。必须用 css 伪元素显式设置。
常见错误是只写 ::placeholder，结果在 Safari 或旧版 Chrome 里失效。实际需补全兼容写法：
.form-control::placeholder {
color: #6c757d; /* Bootstrap 默认 placeholder 灰度 */
}
.form-control::-webkit-input-placeholder { color: #6c757d; }
.form-control::-moz-placeholder { color: #6c757d; }
.form-control:-ms-input-placeholder { color: #6c757d; }
.form-control::-ms-input-placeholder { color: #6c757d; }
如果你用的是 Sass（如自定义 Bootstrap 编译），可以直接在变量层覆盖：$form-text-muted-color 不影响 placeholder，真正起作用的是 $input-placeholder-color —— 修改它后重新编译即可全局生效。
Bootstrap 4 的 $input-placeholder-color 变量能直接改，但注意作用域
Bootstrap 4 把 placeholder 颜色抽成独立变量 $input-placeholder-color，默认值是 $text-muted（即 #6c757d）。改它确实一劳永逸，但有两个前提：
- 你使用的是源码编译（Sass），不是直接引用
bootstrap.min.css - 你的自定义变量要在
@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/variables"之前声明，否则会被覆盖
如果只是想局部调整，比如某个表单需要更浅的占位符，直接加 class 覆盖伪元素更安全，避免污染全局样式。
用 !important 强制覆盖时，优先级陷阱比想象中多
Bootstrap 5 的 .form-control 类本身没给 ::placeholder 设颜色，但某些 UI 库或项目已有样式可能通过更具体的选择器（如 .my-form .form-control::placeholder）设置了颜色，此时单纯加 !important 不一定赢。
推荐做法是提升选择器权重，而不是无脑 !important：
.my-custom-form .form-control::placeholder {
color: #999 !important;
}
另外注意：Vue / React 组件中动态插入的表单，若 placeholder 是通过 attr 或 v-bind 注入，CSS 仍生效；但若用 contenteditable 模拟输入框，则 ::placeholder 根本不适用——那是另一套渲染逻辑。
深色模式下 placeholder 颜色经常被忽略
Bootstrap 5.3+ 原生支持深色模式（data-bs-theme="dark"），但它的 $input-placeholder-color 变量默认没按主题区分，导致深色背景下 placeholder 还是浅灰，几乎看不见。
解决方法是用媒体查询或属性选择器做条件适配：
[data-bs-theme="dark"] .form-control::placeholder {
color: #6c757d80;
}
/* 或用 prefers-color-scheme */
@media (prefers-color-scheme: dark) {
.form-control::placeholder {
color: #6c757d80;
}
}
透明度后缀 80 是关键——纯黑 #000 在深色背景上对比度太低，半透浅灰反而可读性更好。这个细节上线前很容易漏测。
