仅使用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>