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 and then set border-bottom

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

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

Answer 3

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

Answer 4

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

Answer 5

input {
  border: 0;
  outline: 0;
  border-bottom: 2px solid #03a8f45e;
  font-size: 1.4rem;
  color: #ccc;
        
}

<input placeholder="Enter search query" type="text" name="fname" autofocus />

Answer 6

Add the following code to your css file. It will automatically change style of all the input boxes in your app.

input {
    border: 0;
    outline: 0;
    border-bottom: 2px solid #1890ff;
}

If you need to apply the style only for an input box then use the follwing class declaration,

.inputbox {
    border: 0;
    outline: 0;
    border-bottom: 2px solid #1890ff;
}

<input class="inputbox" placeholder="Enter a number"/>