Input text field with only bottom border

amrjo picture amrjo · May 26, 2016 · Viewed 73.9k times · Source

How do I style the text input field to make it only have a border-bottom like this one?

Expected Text Input Field

SS

Answer

dippas picture dippas · May 26, 2016

Use outline:0 for chrome.. and then just set border-bottom as you like

input {
  outline: 0;
  border-width: 0 0 2px;
  border-color: blue
}
input:focus {
  border-color: green
}
<input placeholder="Text" type="text" />