Стилизация элемента ввода с использованием только 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>