对于焦点前的输入边框。你可以指定你想要使用的最喜欢的颜色和其他css，如填充等

.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

当我们关注输入时。你可以指定你喜欢的颜色轮廓

.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

要禁用蓝色辉光(但你可以修改代码来改变颜色，大小等)，添加这个到你的css:

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

下面是一个屏幕截图，展示了之前和之后的效果:

你可以使用.form-control选择器来匹配所有输入。例如改为红色:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

把它放在你的自定义css文件中，并在bootstrap.css之后加载它。它将适用于所有输入，包括文本区域，选择等…

实际上，在Bootstrap 4.0.0-Beta(截至2017年10月)中，input元素没有被input[type="text"]引用，输入元素的所有Bootstrap 4属性实际上都是基于表单的。

它使用。form-control:focus样式。用于突出显示输入元素的“on focus”的适当代码如下:

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

很容易实现，只需要改变border-color属性。

这将工作100%使用这个:

.form-control, .form-control:focus{
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
   border: rgba(255, 255, 255, 0);
}

如果您正在使用Bootstrap 3。X，你现在可以用新的@input-border-focus变量改变颜色。

有关更多信息和警告，请参阅commit。

在_variables。SCSS更新@input-border-focus。

要修改这个辉光的大小/其他部分，请修改mixins/_forms.scss

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
  }
}