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

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

2 个答案: