如何刪除輸入字段的邊框底部？

Question

誰能告訴我開始書寫時如何刪除輸入字段的邊框底部？

 .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

您沒有定義任何邊距底樣式。

輸入看起來“高”，因為您的字體大小為14px，輸入高度為35px。

因此，也許只是降低高度，添加一些填充並添加事件監聽器。

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

另外，純CSS命題，添加一個required屬性以輸入並檢查新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

我不確定您是指填充還是邊距。 這是兩個示例：

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> 

---

這是兩者的MDN鏈接：

margin-bottom

padding-bottom