如何刪除引導程序 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屬性。