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

Question

我想设置输入元素的样式，如下所述。

我通过删除border属性并单独添加border-bottom来完成此操作。 但当我输入文字时，会出现一些边框。

如何在输入聚焦时删除边框？是否有任何方法可以在不使用脚本的情况下仅使用CSS（如任何伪元素）来实现。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在CSS中，为outline: none;元素设置input。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;