仅使用CSS设置输入元素的样式

Question

我想设置输入元素的样式,如下所述.

我这样做是通过删除border属性并单独添加border-bottom.但当我输入文字时,会出现一些边框.

输入聚焦时如何删除边框？有没有办法,我们可以只使用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中,outline: none;为input元素设置.

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>