Input text field with only bottom border

Question

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

Expected Text Input Field

Answer 1

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" />

Answer 2

Try this one

.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?👻"/>