如何将此特定样式应用于输入

Question

如何将样式应用于底部只显示一行的文本字段，在您键入时会消失？我必须只使用css。

我的意思是这样的

_surname ____________

_my name ____________

我试过这个，但这只是工作的结果，因为线路没有消失

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

Answer 1

input[type="text"]
{
    border: 0;
    border-bottom: 1px solid black;
    outline: 0;
    background-color:transparent;
    padding:4px;
    line-height:1;
}

input[type="text"]:focus {
  border-bottom:none;
}

<input type="text"/>