优先检查CSS加载顺序和选择器权重：确保自定义CSS在Bootstrap之后加载，且需同时声明::placeholder及各浏览器前缀变体，并显式设置color、font-size、font-family等属性。
占位符颜色不生效？优先检查 CSS 加载顺序和选择器权重
bootstrap 默认完全不管 ::placeholder 样式，哪怕你加了 form-control 类。浏览器原生的占位符默认灰度低、透明度高，直接写 color: #6c757d 会显得太实，反而突兀。
常见失效原因有三个：
- 自定义 CSS 文件在 Bootstrap 之前加载，规则被覆盖
- 只写了
::placeholder，没覆盖::-webkit-input-placeholder等前缀变体（虽然 Bootstrap 5 已弃 IE，但 Chrome/Firefox 仍需双冒号写法） - 用了
.form-control::placeholder这种写法——它无效，因为 Bootstrap 根本没定义这条规则，你得自己从零声明
正确写法：用 rgba() 控制明暗，显式声明 font-family
占位符文本不会继承父元素的 color 或 font-size，必须单独设。尤其注意透明度：直接设纯色会破坏视觉层次。
推荐写法（CSS）：
::placeholder {
color: rgba(108, 117, 125, 0.6);
font-size: 1rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
说明：
-
rgba(108, 117, 125, 0.6)对应 Bootstrap 的$gray-600半透明，比硬写#6c757d更协调 - 如果项目用了自定义字体（比如
font-family: "Inter"），占位符必须重写font-family，否则 fallback 到系统默认 - 避免
font-weight: bold—— 加粗后容易被误认为已输入内容
Sass 用户：复用变量，别写死颜色值
如果你用的是 Bootstrap 源码（Sass 版），硬编码颜色值等于埋坑。后续升级或换主题时，样式会断。
正确做法是确保导入顺序，并引用变量：
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
::placeholder {
color: rgba($gray-600, .6);
font-size: $input-font-size;
}
关键点：
- 必须在
@import "variables"之后写，否则$gray-600未定义 -
$input-font-size是 Bootstrap 内置变量，能自动适配响应式断点变化 - 不要用
!important—— Sass 编译后生成的 CSS 权重足够，加!important反而干扰后续覆盖
CDN 用户：确保自定义 CSS 在 bootstrap.min.css 之后加载
用 CDN 引入 Bootstrap 时，最容易忽略加载顺序。哪怕 CSS 写对了，如果 <link rel="stylesheet"> 放在 Bootstrap 前面，照样白搭。
检查 HTML 中的顺序是否如下：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="your-custom.css" rel="stylesheet">
如果还是不生效，打开 DevTools → Elements 面板，选中 input 元素，看右侧 Styles 面板里 ::placeholder 规则是否被划掉。被划掉 = 被更高优先级规则覆盖，此时才考虑加 !important —— 但这是兜底手段，不是首选。
真正容易被忽略的是：占位符的 font-size 和 line-height 必须与 .form-control 严格对齐，否则在小屏幕下会出现文字截断或上下偏移。这点连很多 Bootstrap 主题作者都会漏掉。
