如何在html和css中创建一个7字符下划线输入文本字段(附带截图)？

Question

我正在为移动应用程序创建一个UI我需要创建一个带有截屏附加UI的popover.如何在html和css中创建一个7字符下划线输入文本字段,如下所示？

---

HTML代码

<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%;
}

Answer 1

这是一个创建单个文本字段的解决方案,每个字符下都有下划线(尝试删除并在input字段中写入另一个数字):

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'/>

这使用宽度为字符宽度的ch单位0.它还假设input字段中的字体是等宽字体,因此所有字符都具有相同的宽度.

所以每个角色的宽度总是如此1ch.人物之间的差距被认为是.5ch.这是我们设定的价值letter-spacing.其中width的input字符数乘以字母宽度(1ch)和间隙宽度(.5ch)之和.那就是7*(1ch + .5ch) = 7*1.5ch = 10.5ch.

我们删除了实际border的,input并使用a设置了假的repeating-linear-gradient.短划线(dimgrey)从开始0到1ch,并且间隙(transparent)在短划线后立即开始并转到1.5ch.

它附在输入的左侧和底部 - 这是background-position组件(0%水平和100%垂直).

它横向传播整个输入(100%)并且2px很高 - 这是它的background-size组成部分background.

生成此CSS的Sass代码是:

$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 0, dimgrey $char-w, 
    transparent 0, transparent $char-w + $gap) 
    0 100%/100% 2px no-repeat;
  font: 5ch consolas, monospace;
  letter-spacing: $gap;

  &:focus {
    outline: none;
    color: dodgerblue;
  }
}

你可以在这里调整差距和其他事情.

Answer 2

向输入添加最大字符长度。

<input type="text" class="underline" maxlength="7">

添加size="7"是一种设置输入宽度以包含 7 个字符的简单方法。但最好在 CSS 中处理这个问题。

并给它适当的样式。

.underline {
    background-color: #fff;
    border: none;
    border-bottom: thin solid gray;
}

首先，我设置border为 0 以删除所有边框样式，然后设置border-bottom. 这样，在设置所有边框顶部、右侧、底部和左侧的样式时，只需要两行代码，而不是四行。

更新
https://jsfiddle.net/1q3h8qeh/