bootstrap 不接管 ::placeholder 样式，需手动用 rgba($gray-600, .6) 等显式定义颜色、font-size 和 font-family；sass 中应引用变量并确保导入顺序；cdn 用户须保证自定义 css 在 bootstrap 后加载。
input::placeholder 选择器必须显式声明
Bootstrap 默认不会接管 ::placeholder 的样式，哪怕你用了 form-control 类。浏览器原生占位符默认灰度低、字体轻，不加干预就和 Bootstrap 主题脱节。必须自己写 CSS 覆盖。
- 所有现代浏览器都支持
::placeholder（注意双冒号，不是单冒号:placeholder） - IE10–11 只认
::-ms-input-placeholder，但 Bootstrap 5 已放弃 IE 支持，可忽略 - 不要试图用
.form-control::placeholder直接覆盖——Bootstrap 的.form-control本身没定义占位符规则，得你自己加
颜色、字体大小、透明度要单独设
占位符文本不能继承父元素的 color 或 font-size，必须显式指定。尤其注意：占位符默认是半透明的，直接设 color: #6c757d 会显得太实，建议搭配 opacity 或用 rgba 控制明暗。
- 推荐写法：
color: rgba(108, 117, 125, 0.6)（对应 Bootstrap 的$gray-600半透明） - 如果用了自定义字体（比如
font-family: "Helvetica Neue"），占位符不会自动继承，也要重写font-family - 避免设
font-weight: bold—— 占位符文字加粗后易被误认为已输入内容
在 Sass 中复用 Bootstrap 变量更安全
如果你用的是 Bootstrap 源码（Sass 版），别硬写死颜色值。直接引用变量，后续升级或换主题时样式才不会断。
- 正确写法（Sass）：
::placeholder { color: rgba($gray-600, .6); font-size: $input-font-size; } - 确保这段代码放在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后 - 如果只用 CDN 引入 CSS，那就只能在自定义 CSS 文件里补，且必须保证它在 Bootstrap CSS 之后加载
表单验证状态会影响占位符显示逻辑
当 .form-control 加了 is-invalid 或 is-valid 类时，占位符仍会显示，但视觉上可能被红/绿边框干扰。这不是 Bug，是预期行为 —— 占位符和验证状态互不控制。
- 若想「有内容时不显示占位符，出错时也保持占位符可见」，不用额外处理，浏览器默认就如此
- 但要注意：某些 UI 库或自定义 JS 会监听
focus并动态移除占位符，这和 Bootstrap 无关，得查自己代码里有没有类似el.placeholder = ""的操作 - 移动端 Safari 对
::placeholder的渲染略慢一帧，如果配合transition动画，可能出现闪烁，建议避免对占位符加过渡效果
color 和 opacity 的组合就很容易漏测。别只盯着默认浅色页面看。
