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