如何删除输入字段的边框底部？

Question

Can anyone tell me how do I remove border-bottom of the input field when I start writing?

 .car-list-input { font-family: 'Source Sans Pro', sans-serif; border-radius: 3px; font-size: 14px; font-weight: 400 !important; height: 35px; position: relative; border-left: 2px solid #e0e6e8; border-right: 2px solid #e0e6e8; border-top: 2px solid #e0e6e8; border-bottom: 0px; } .car-list-input:focus { border-color: #25c16f; outline: 0; box-shadow: none; border-bottom: 0px; } 

 <input type="text" placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input"> 

Answer 1

You didn't defined any margin-bottom style.

The input looks "tall" because your font size is 14px and the input height is 35px.

So maybe, just low the height, put some padding and add an event listener.

 document.getElementById("location").addEventListener("keyup", function(){ if (this.value != '') { this.style.borderBottomWidth = "0px" } else { this.style.borderBottomWidth = "2px" } },false) 

 .car-list-input { font-family: 'Source Sans Pro', sans-serif; border: 2px solid #e0e6e8; border-radius: 3px; font-size: 14px; font-weight: 400 !important; height: 35px; position: relative; } .car-list-input:focus { border-color: #25c16f; outline: 0; box-shadow: none; border-bottom: solid 2px #25c16f; } 

 <input type="text" placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input"> 

Also, pure CSS proposition, add a required attribute to input and check the new CSS :

 .car-list-input { font-family: 'Source Sans Pro', sans-serif; border-style: solid; border-color: #e0e6e8; border-width: 2px 2px 0 2px; border-radius: 3px; font-size: 14px; font-weight: 400 !important; height: 35px; position: relative; } .car-list-input:focus { border-color: #25c16f; outline: 0; box-shadow: none; border-color: #25c16f; } .car-list-input:invalid { border-width:2px; } 

 <input type="text" required placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input"> 

Answer 2

I'm not sure if you mean padding or margin. Here are two examples:

margin-bottom :

https://jsfiddle.net/q049negk/

 .car-list-input { font-family: 'Source Sans Pro', sans-serif; border-radius: 3px; font-size: 14px; font-weight: 400 !important; height: 35px; position: relative; border-left: 2px solid #e0e6e8; border-right: 2px solid #e0e6e8; border-top: 2px solid #e0e6e8; border-bottom: 0px; margin-bottom: 50px; } .car-list-input:focus { border-color: #25c16f; outline: 0; box-shadow: none; border-bottom: solid 2px #25c16f; margin-bottom: 0px; } .square { height: 60px; width: 60px; background: red; margin: 0; padding: 0; } 

 <input type="text" placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input"> <div class="square"> </div> 

padding-bottom :

https://jsfiddle.net/q049negk/1/

 .car-list-input { font-family: 'Source Sans Pro', sans-serif; border-radius: 3px; font-size: 14px; font-weight: 400 !important; height: 35px; position: relative; border-left: 2px solid #e0e6e8; border-right: 2px solid #e0e6e8; border-top: 2px solid #e0e6e8; border-bottom: 0px; padding-bottom: 50px; } .car-list-input:focus { border-color: #25c16f; outline: 0; box-shadow: none; border-bottom: solid 2px #25c16f; padding-bottom: 0px; } .square { height: 60px; width: 60px; background: red; margin: 0; padding: 0; } 

 <input type="text" placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input"> <div class="square"> </div> 

---

Here are MDN links for both:

margin-bottom

padding-bottom