实际上，在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属性。

为什么不直接使用呢?

 input:focus{
        outline-color : #7a0ac5;
    }

这应该有助于去除它! 输入[type = text] { 边界:没有; ｝ 输入[type = text]:focus { 边界:没有; 不必:没有; ｝

对于Bootstrap v4.0.0 beta版本，你需要将以下内容添加到覆盖Bootstrap的样式表中(可以在CDN/local链接后添加到Bootstrap v4.0.0 beta版，也可以在样式中添加!

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

将box-shadow上的border-color和rgba替换为你想要的颜色样式*。

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

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

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

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

在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变量来控制阴影宽度。