僅使用CSS設計輸入元素

Question

我想按如下所述設置輸入元素的樣式。

我通過去除邊框屬性和添加邊框底部獨自這樣做。 但是當我在那裏輸入文字時，出現了一些邊框。

我怎樣才能刪除邊框當輸入集中？有沒有什麼辦法可以在不使用腳本的情況下僅使用CSS（像任何僞元素）。

<div><span>First Name</span><span class="spacing" style=" 
 
    display: inline-block; 
 
    width: 10px; 
 
"></span><input type="text" style=" 
 
    border: 0px; 
 
    border-bottom: 1px solid black; 
 
"></div>

Answer 1

在你的CSS，爲input元素設置outline: none;。

input[type="text"] { 
 
    border: none; 
 
    border-bottom: 1px solid black; 
 
    outline: none; 
 
} 
 

 
input[type="text"]:focus { 
 
    border-color: pink; 
 
}

<div><span>First Name</span><span class="spacing" style=" 
 
    display: inline-block; 
 
    width: 10px; 
 
"></span><input type="text"></div>