html - 删除文本下方输入字段中不需要的空格

Question

我的 html 中有一个这样的输入字段:

输入字段的 CSS:

.form-control-1 {
  display: block;
  margin: 0 auto;
  width: 30%;
  height: 50px;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
  color: #555;
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  border: 0px solid black;
  border-bottom: 1px solid black;
  transition: width 1s;
  outline: none;
}

在移动视口(viewport) (< 768px) 中覆盖上面定义的一些 CSS 规则的 CSS:

.m-form-control-1 {
  width: 100% !important;
  line-height: 0 !important;
  padding: 0 !important;
}

我现在遇到的问题是我似乎无法使用 line-height:0 和 padding:0 删除占位符“用户名”和输入字段的边框底部之间的空格。

我也试过为底部边距设置负值。例如。 margin-bottom:-5% 但还是不行？

如何删除不需要的空间？

注意:我只在移动 View 中遇到这个问题。 (<768px)

JS fiddle : https://jsfiddle.net/quwswery/

Answer 1

将 height:auto 设置为 form-control-1 或者您也可以删除高度。

.m-form-control-1 {
  width: 100% !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin-bottom: -5% !important;
}

.form-control-1 {
  display: block;
  margin: 0 auto;
  width: 30%;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
  color: #555;
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  border: 0px solid black;
  border-bottom: 1px solid black;
  transition: width 1s;
  outline: none;
}

<input autocomplete="off" type="text" class="m-form-control-1 form-control-1" id="username" name="username" data-ng-model="username" data-ng-minlength="8" data-ng-maxlength="20" data-ng-pattern="[0-9a-zA-Z]+" required data-ng-focus="disableUsernameWarning()"
  data-ng-blur="enableUsernameWarning()" data-ng-required placeholder="Username" />