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