如何删除Bootstrap 4中输入元素周围的蓝色边框？

Question

每当我单击输入字段时，周围都会出现蓝色边框。如何删除或更改此问题？

        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Recipient's username" 
           aria-label="Recipient's username" aria-describedby="basic-addon2">
           <div class="input-group-append">
               <button type="button" class="btn btn-outline-primary mb- 2">Subscribe</button>
            </div>
          </div>

对于此代码，我编写了以下代码，但是它不是周围的蓝色边框，而是删除了输入内部的边框。

.input:focus {
outline: none !important;
}

Answer 1

您可以将box-shadow属性设置为none喜欢：

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: none!important;
}

如果您不需要，请删除Border Color属性。