Bootstrap表单输入控件背景及文本颜色设置不生效问题求助

你遇到的两个问题——表单预填充背景异常和输入聚焦时文本呈灰色，对应的遗漏点及修复方案如下：

1. 解决预填充背景异常 #

浏览器会给自动填充的输入框添加:-webkit-autofill等私有伪类样式，你的代码未覆盖这部分浏览器默认样式，导致背景显示异常。需要补充以下样式：

// 覆盖浏览器自动填充的默认样式
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:active,
.form-control:-webkit-autofill:focus {
  background-color: $input-bg !important;
  // 用内阴影强制覆盖浏览器默认背景（部分浏览器直接修改background-color不生效）
  -webkit-box-shadow: 0 0 0 30px $input-bg inset !important;
  -webkit-text-fill-color: $input-color !important;
}

2. 解决聚焦时文本颜色为灰色 #

你仅通过变量定义了$input-color，但未明确设置输入框聚焦状态的文本颜色，Bootstrap默认的聚焦样式可能覆盖了变量配置。修改现有样式，补充color属性：

.form-control,
.form-control:active,
.form-control:focus,
.form-control:focus:active {
  background-color: $input-bg;
  color: $input-color; // 明确指定文本颜色，覆盖聚焦时的默认样式
}

若上述代码优先级不足，可添加!important强制覆盖，但建议优先通过提升CSS选择器权重（比如增加父级类前缀）来避免使用!important。

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono