输入文本中的下划线已固定

Question

我试图在所有输入文字类型中修改下划线，但没有成功。

示例：

我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用linear-gradient作为背景来创建一条线，您可以像这样轻松控制其大小和位置：

input {
  width: 300px;
  background: linear-gradient(to right, #000, #000) 5px calc(100% - 5px)/calc(100% - 10px) 2px no-repeat;
  /* <5px calc(100% - 5px)> : position of the gradient [5px from left and 5px from bottom  */
  /* <calc(100% - 10px) 2px> : size of the gradient [width:100%-10px height:2px] */
  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(to right, #000, #000);
  background-position: 5px calc(100% - 5px);
  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

在输入的底部添加边框？

input {
  width: 100%;
  background-color: #fcfcfc;
  border: 0;
  border-bottom: 2px solid lightgrey;
  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 3

试试看：

.custom-input{
    border-width: 0px 0px 1px;
    border-color: #DADADA;
    font-size: 14px;
    text-align: left;
    letter-spacing: 0px;
    color: #323A47;
    padding-bottom: 5px;
}

<input type="text" name="" value="12" class="custom-input">