在输入文本中固定下划线答案

【问题标题】：Underline fixed in input text在输入文本中固定下划线
【发布时间】：2018-06-24 12:55:47
【问题描述】：

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

例子：

我的代码：

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>

【问题讨论】：

你在使用 Bootstrap 吗？
是的！！！我尝试了一切，但没有这样的效果

标签： html css twitter-bootstrap input underline

【解决方案1】：

试试看：

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

&lt;input type="text" name="" value="12" class="custom-input"&gt;

【讨论】：

【解决方案2】：

使用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;
}

&lt;input class="" id="endereco" type="text" tabindex="2" minlength="5" required&gt;

使用普通语法：

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

&lt;input class="" id="endereco" type="text" tabindex="2" minlength="5" required&gt;

【讨论】：

【解决方案3】：

在输入的底部添加边框？

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>

【讨论】：

如果你看一下图片，不是border-bottom。该线不接触左边框和右边框。
对不起，我不明白。您希望线条不接触左右边界吗？所以你希望它的宽度小于 100%？