输入文本中固定的下划线

Question

我正在尝试修复所有输入文本类型中的下划线，但没有成功。

例子：

我的代码：

input {
  width: 100%;
  background-color: #fcfcfc;
  border: 0;
  padding: 10px;
}

<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
  <label for="endereco">Endereço:</label>
  <input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
</div>

Answer 1

使用linear-gradient作为背景来创建一条线，你可以很容易地控制它的大小和位置是这样的：

input {
  width: 300px;
  background: 
      linear-gradient(#000, #000) center bottom 5px /calc(100% - 10px) 2px no-repeat;
  background-color: #fcfcfc;
  border: 1px solid;
  padding: 10px;
}

<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>

使用普通语法：

input {
  width: 300px;
  background-image: linear-gradient(#000, #000);
  background-position: bottom 5px center;
  background-size: calc(100% - 10px) 2px;
  background-repeat: no-repeat;
  background-color: #fcfcfc;
  border: 1px solid;
  padding: 10px;
}

<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>

Answer 2

在输入框的底部添加边框？

\n\n

\r\n

\r\n

input {\r\n  width: 100%;\r\n  background-color: #fcfcfc;\r\n  border: 0;\r\n  border-bottom: 2px solid lightgrey;\r\n  padding: 10px;\r\n}

\r\n

<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">\r\n  <label for="endereco">Endere\xc3\xa7o:</label>\r\n  <input class="" id="endereco" type="text" tabindex="2" minlength="5" required>\r\n</div>

\r\n

\r\n

\r\n

\n