Bootstrap 5 中需用更具体选择器（如 .form-control::placeholder）并确保自定义 CSS 在 Bootstrap 后加载，或使用 !important 覆盖；Sass 用户可修改 $input-placeholder-color 变量；务必保证对比度 ≥4.5:1 并适配深色模式。
Bootstrap 5 中如何覆盖 ::placeholder 样式
bootstrap 5 默认用 color: #6c757d 渲染 ::placeholder，但这个颜色在浅色背景上对比度偏低，尤其对视力障碍用户不友好。直接写 ::placeholder 规则常被 bootstrap 的 css 权重压制，必须提高选择器特异性或加 !important（仅限局部覆盖）。
- 推荐方式：在自定义 CSS 文件中，用更具体的选择器，例如
.form-control::placeholder或.form-control:focus::placeholder - 若用 Sass 编译，可改变量
$form-text-muted（影响 placeholder 和 help-text），但注意它也会影响其他元素 - 不要只写
::placeholder，否则会被 Bootstrap 的.form-control::placeholder覆盖（后者权重更高）
为什么 input.form-control::placeholder 有时不生效
常见原因是 Bootstrap 的 CSS 文件加载顺序靠后，或者你写的规则没命中实际 DOM 结构——比如用了 textarea 或 select，它们不支持 ::placeholder；又或者用了 form-control-lg 类，需同步覆盖对应选择器。
- 检查浏览器开发者工具，确认最终生效的
::placeholder规则来源（是 Bootstrap 还是你自己的） -
textarea.form-control::placeholder和input.form-control::placeholder需分别写，不能合并简写 - 某些旧版 Bootstrap（如 4.x）用的是
::-webkit-input-placeholder等私有前缀，5.x 已统一为标准::placeholder
兼容性与无障碍注意事项
修改 placeholder 颜色时，必须保证与背景色的对比度 ≥ 4.5:1（WCAG AA 级）。Bootstrap 默认的 #6c757d 在白色背景上对比度约 4.3，略低于标准。简单调深即可，但别用纯黑（#000），会显得太突兀。
- 推荐值：
#495057（Bootstrap 的$gray-600），对比度 ≈ 5.8:1 - 避免用
opacity控制灰度，它会降低可访问性（屏幕阅读器无法感知透明度变化） - 深色主题下务必单独写
.dark .form-control::placeholder，否则 placeholder 会看不见
一行生效的最小代码示例
如果只是临时调试或小项目，直接在 里加 style 块最省事：
style type="text/css">
.form-control::placeholder {
color: #495057 !important;
}
.form-control:focus::placeholder {
color: #6c757d;
}
注意：这里用了 !important 是因为 Bootstrap 的 .form-control::placeholder 规则带 !important（5.3.2 版起），所以你也得加才能覆盖。真正上线建议移入独立 CSS 文件并确保加载顺序在 Bootstrap 之后。
placeholder 颜色不是孤立样式，它和 :focus 状态、disabled 状态、深色模式切换都耦合在一起，改一处最好连带验证其他状态是否一致。
