本文介绍了下划线固定在输入文字中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图修正所有输入文本类型的下划线，但没有成功。
示例：
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>
更多推荐
下划线固定在输入文字中
发布评论