下划线固定在输入文字中 [英] Underline fixed in input text

问题描述

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

示例：

  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>详细说明：< / label> < input class =id =enderecotype =texttabindex =2minlength =5required>< / div>  

使用线性渐变作为背景

创建一条线，您可以轻松控制其大小和位置，如下所示：

falsedata-console =truedata-babel =false>

input {width：300px;背景：线性梯度（向右，＃000，＃000）5px calc（100％ - 5px）/ calc（100％ - 10px）2px no-repeat; / *< 5px calc（100％ - 5px）> ：渐变的位置[左起5px，下起5px * / / *< calc（100％ - 10px）2px> ：渐变的大小[width：100％-10px height：2px] * / background-color：#fcfcfc; border：1px solid; padding：10px;}

< input class = id =enderecotype =texttabindex =2minlength =5required>

$ b

您也可以使用更简单的语法：

input {width：300px; background-image：线性渐变（向右，＃000，＃000）; background-position：5px calc（100％ - 5px）; background-size：calc（100％ - 10px）2px;背景重复：不重复; background-color：#fcfcfc; border：1px solid; padding：10px;}

< input class = id =enderecotype =texttabindex =2minlength =5required>

$ b

I'm trying to fixed the underline in all input text type, but without success.

Example:

My code:

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>

解决方案

Use linear-gradient as background to create a line and you can easily control its size and position like this:

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>

You can also use and easier syntax:

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>

这篇关于下划线固定在输入文字中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！