你可以这样修改.form-control:focus颜色而不改变引导样式:

快速修复

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 

完整的解释

Find the bootstrapCDN version that you are using. E.g. for me right now is 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css Search for the class you want to modify. E.g. .form-control:focus and copy the parameters that you want to modify into your css. In this case is border-color and box-shadow. Choose a color for the border-color. In this case I choose to pick up the same green the bootstrap uses for their .btn-success class, by searching for that particular class in the bootstrap.css page mentioned in the step 1. Convert the color you have picked to RGB and add that to the box-shadow parameter without altering the fourth RGBA parameter (0.25) that bootstrap has for transparency.

你可以这样修改.form-control:focus颜色而不改变引导样式:

快速修复

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 

完整的解释

Find the bootstrapCDN version that you are using. E.g. for me right now is 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css Search for the class you want to modify. E.g. .form-control:focus and copy the parameters that you want to modify into your css. In this case is border-color and box-shadow. Choose a color for the border-color. In this case I choose to pick up the same green the bootstrap uses for their .btn-success class, by searching for that particular class in the bootstrap.css page mentioned in the step 1. Convert the color you have picked to RGB and add that to the box-shadow parameter without altering the fourth RGBA parameter (0.25) that bootstrap has for transparency.

根据@wasinger上面的回复，在Bootstrap 4.5中，我不仅要覆盖颜色变量，还要覆盖盒影本身。

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;

试试这个，它和bootstrap的输入是一样的…

input:focus{
  color: #212529;
  background-color: #FFF;
  border-color: #86B7FE;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

在Bootstrap 4中，如果你自己编译SASS，你可以改变下面的变量来控制焦点阴影的样式:

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

注意:从Bootstrap 4.1开始，$input-btn-focus-color和$input-btn-focus-box-shadow变量只用于输入元素，而不是按钮。按钮的焦点阴影被硬编码为box-shadow: 0 0 0 $btn-focus-width rgba($border， .5);，所以你只能通过$input-btn-focus-width变量来控制阴影宽度。

简单的一个

要移除它:

.form-control, .btn {
    box-shadow: none !important;
    outline: none !important;
}

来改变它

.form-control, .btn {
    box-shadow: new-value !important;
    outline: new-value !important;
}