如何在Bootstrap或CSS中修改form-control类表单字段的边框颜色

操作方法 #

你提到的元素是Bootstrap框架的表单输入控件，form-control是Bootstrap表单元素通用类，form-control-lg对应大尺寸样式，is-invalid是校验失败状态类，直接添加自定义CSS覆盖框架默认样式即可调整边框颜色：

• 全局修改所有is-invalid状态的表单控件边框为浅粉色
  将以下代码加入你的自定义CSS文件中：

.form-control.is-invalid, .form-control.is-invalid:focus {
    /* 浅粉色色值可根据需求自行调整 */
    border-color: #ffb6c1;
    /* 同步修改聚焦状态的光晕颜色，和边框色匹配 */
    box-shadow: 0 0 0 0.25rem rgba(255, 182, 193, 0.25);
}

• 仅修改当前单个控件的边框颜色
  先给该控件额外添加自定义类，比如custom-pink-border，修改后的类属性为：
  class="form-control form-control-lg is-invalid custom-pink-border"
  再添加如下CSS：

.form-control.custom-pink-border.is-invalid, .form-control.custom-pink-border.is-invalid:focus {
    border-color: #ffb6c1;
    box-shadow: 0 0 0 0.25rem rgba(255, 182, 193, 0.25);
}

内容的提问来源于stack exchange，提问作者Shira