我正在创建一个移动应用程序的UI我需要创建一个popover,其中的UI附加在屏幕截图中.如何在html和css中创建一个7字符下划线输入文本字段,如下所示？
<ion-modal-view class="modal contact-details-modal" id="contactDetailModal">
<ion-content delegate-handle="modalContent">
<center>
<br><br>
<img src="assets/images/camera-small.png">
<br><p>Camera</p>
<div class="underline_camera" style="border: 0;border-bottom: 1px solid #b2b2b2;outline: 0;width: 100px;">
<input type="text" id="camera" name=" camera" value="" />
</div><br>
<div class="meter_reading" style="border: 0;border-bottom: 1px solid #b2b2b2;outline: 0;width: 20px;">
<input type="text" id="meter" name=" meter" value="" />
<!--<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />-->
</div>
<div class="button-bar">
<a class="button button-balanced">
SUBMIT</a>
</div>
</center>
</ion-content>
</ion-modal-view>
CSS代码
.contact-details-modal {
top: 15%;
border-radius: 3px;
-webkit-border-radius: 3px;
min-height: 70% !important;
width: 80%;
left: 10%;
}
解决方法
这是一个创建单个文本字段的解决方案,每个字符下都有下划线(尝试删除并在输入字段中写入另一个数字)：
input {
border: none;
width: 10.5ch;
background:
repeating-linear-gradient(90deg,dimgrey 0,dimgrey 1ch,transparent 0,transparent 1.5ch)
0 100%/100% 2px no-repeat;
color: dimgrey;
font: 5ch consolas,monospace;
letter-spacing: .5ch;
}
input:focus {
outline: none;
color: dodgerblue;
}
<input maxlength='7' value='0123456'/>
这使用the ch unit,其宽度是0字符的宽度.它还假设输入字段中的字体是等宽字体,因此所有字符都具有相同的宽度.
所以每个角色的宽度总是1ch.字符之间的差距为.5ch.这是我们为字母间距设置的值.输入的宽度是字母数乘以字母宽度(1ch)和间隙宽度(.5ch)之和.所以这是7 *(1ch .5ch)= 7 * 1.5ch = 10.5ch.
我们删除输入的实际边界,并使用重复线性渐变设置假的边框.破折号(dimgrey)从0到1ch,差距(透明)在破折号后立即开始并且变为1.5ch.
它附加在输入的左侧和底部 – 这是背景位置组件(水平0％,垂直100％).
它横向扩展整个输入(100％)并且高2px – 这是背景的背景大小组件.
$char-w: 1ch;
$gap: .5*$char-w;
$n-char: 7;
$in-w: $n-char*($char-w + $gap);
input {
border: none;
width: $in-w;
background: repeating-linear-gradient(90deg,dimgrey $char-w,transparent $char-w + $gap)
0 100%/100% 2px no-repeat;
font: 5ch consolas,monospace;
letter-spacing: $gap;
&:focus {
outline: none;
color: dodgerblue;
}
}
你可以调整差距和其他东西here.
