仅输入底部边框的输入文本字段

Question

如何设置文本input字段的样式以使其只有border-bottom这样的一个？

预期的文本Input字段

Answer 1

试试这个

.inp {
    border:none;
    border-bottom: 1px solid #1890ff;
    padding: 5px 10px;
    outline: none;
 }

[placeholder]:focus::-webkit-input-placeholder {
    transition: text-indent 0.4s 0.4s ease; 
    text-indent: -100%;
    opacity: 1;
 }

<input class="inp" placeholder="What needs to be done?"/>

Answer 2

使用outline:0镀铬..然后只设置border-bottom你喜欢

input {
  outline: 0;
  border-width: 0 0 2px;
  border-color: blue
}
input:focus {
  border-color: green
}

<input placeholder="Text" type="text" />

Answer 3

input {
    border: 0;
    outline: 0;
    border-bottom: 2px solid blue;
}

Answer 4

#input_Id{
   border:0px;
   border-bottom:2px solid #eee;
}