只有底部边框的输入文本字段

Question

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

预期文本 Input 字段

原文由 amrjo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 outline:0 用于 chrome .. 然后根据需要设置 border-bottom

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

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

原文由 dippas 发布，翻译遵循 CC BY-SA 3.0 许可协议