下划线固定在输入文字中

下划线固定在输入文字中

本文介绍了下划线固定在输入文字中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



示例:



  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>

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