Bootstrap 的 form-control 类不接管 ::placeholder 样式，需显式声明 input::placeholder 及各浏览器前缀变体，并用 rgba() 控制透明度、单独设置 font-family 和 font-size，同时确保自定义 CSS 在 Bootstrap 之后加载。
Bootstrap 的 form-control 类不接管 ::placeholder 样式
直接写 input::placeholder { color: #6c757d; } 很可能无效——不是你写错了，而是 Bootstrap 本身没定义这条规则，它压根不碰 ::placeholder。它的 .form-control 只控制输入框本体的边框、圆角、内边距等，占位符样式完全交由浏览器默认处理。所以你得自己从零声明，不能指望“继承”或“覆盖”某个已存在的 Bootstrap 规则。
::placeholder 必须显式声明 color 和 font-family
占位符文本不继承父元素的 color 或 font-family，哪怕你给 input 设了 color: #333 或 font-family: "Inter"，::placeholder 仍会回退到浏览器默认灰黑色和系统字体。常见失效场景：
- 只写了
color，但项目用了自定义字体，结果占位符显示为 Times New Roman 或 Courier - 写了
color: #6c757d，但没加opacity或rgba()，导致颜色太实，和设计稿脱节 - 在 Sass 中硬编码
#6c757d，后续换主题时所有占位符颜色全断
推荐写法（CSS）：
::placeholder {
color: rgba(108, 117, 125, 0.6);
font-size: 1rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
若用 Sass，确保在 @import "variables" 后声明：
立即学习“前端免费学习笔记（深入）”；
::placeholder {
color: rgba($gray-600, .6);
font-size: $input-font-size;
}
必须补全浏览器前缀，否则 iOS Safari 和旧 Edge 会失效
虽然 Chrome 57+、Firefox 52+、Edge 79+、Safari 10.1+ 都支持标准 ::placeholder，但大量真实用户仍在用 iOS Safari 13–15.3（尤其旧款 iPhone），它们只认 ::-webkit-input-placeholder。IE11 虽已淘汰，但部分企业内网仍存在，需保留 :-ms-input-placeholder。
关键点：
- 前缀规则必须单独成行，不能合并写成
input::-webkit-input-placeholder, input::placeholder - 不要用
!important——Bootstrap 源码里也有类似规则（如.form-control::-webkit-input-placeholder），加!important容易和框架自身冲突 - 把标准写法放最前，前缀版本依次跟在后面，靠 CSS 层叠顺序兜底
最小可用兼容块：
input::placeholder {
color: rgba(108, 117, 125, 0.6);
}
input::-webkit-input-placeholder {
color: rgba(108, 117, 125, 0.6);
}
input::-moz-placeholder {
color: rgba(108, 117, 125, 0.6);
opacity: 1;
}
input:-ms-input-placeholder {
color: rgba(108, 117, 125, 0.6);
}
检查 DevTools 中 ::placeholder 是否被划掉
打开浏览器开发者工具，选中搜索框 input 元素，在 Styles 面板里展开 ::placeholder 伪元素。如果它的 color 值被 strikethrough（划掉），说明有更高优先级的规则覆盖了它。常见干扰源：
- 全局重置样式表里写了
input::placeholder { color: #999; }，且加载顺序在你自定义 CSS 之后 - Bootstrap 的
.form-control::-webkit-input-placeholder规则（存在于未压缩版源码中） - 某些 UI 组件库（如 Ant Design）主动重置了所有 placeholder 颜色
解决办法：提升选择器特异性，比如改用 input.form-control.search-input::placeholder，或确保你的 CSS 文件在 Bootstrap 之后加载。
真正麻烦的不是写几行 CSS，而是占位符颜色在暗色模式、高对比度辅助模式、不同输入类型（type="search" vs type="email"）下都需要单独适配——这些没法靠一套通用规则覆盖，得按需分组声明。
