當我用邊框半徑對我的輸入進行對焦時，出現方形邊框

Question

當我用border-radius對我的輸入進行對焦時，出現方形邊框。

我可以讓這第二個邊框dispear或只是設置一個border radius它？

input[type="text"]{ 
 
    border: 1px solid red; 
 
    border-radius:10px; 
 
}

<input type="text">

這是方形邊框：

感謝。

Answer 1

藍色矩形被標記爲outline你可以通過outline: none規則

input[type="text"]{ 
 
    border: 1px solid red; 
 
    border-radius:10px; 
 
} 
 
input[type="text"]:focus{ 
 
    outline: none 
 
}

<input type="text">

當然，你可以風采吧隱藏它。請參見本doc看到適用的規則。

Answer 2

只需將outline:none;添加到您的輸入。

input[type="text"]{ 
 
    border: 1px solid red; 
 
    border-radius:10px; 
 
    outline:none; 
 
}

<input type="text">

Answer 3

只需添加輪廓：0像素無;到您的輸入。

input[type="text"]{outline:0px none;}