如何在 html 和 css 中创建 7 个字符的下划线输入文本字段（附截图）？

Question

我正在为移动应用程序创建一个 UI，我需要创建一个带有屏幕截图中附加 UI 的弹出框。如何在 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'/>

这使用the ch unit，其宽度是0 字符的宽度。它还假设input 字段中的字体是等宽字体，因此所有字符都具有相同的宽度。

所以每个字符的宽度总是1ch。字符之间的间距为.5ch。这是我们为letter-spacing 设置的值。 input 的 width 是字符数乘以字母宽度 (1ch) 和间隙宽度 (.5ch) 之和。这就是7*(1ch + .5ch) = 7*1.5ch = 10.5ch。

我们删除了input 的实际border，并使用repeating-linear-gradient 设置了一个假的。破折号 (dimgrey) 从 0 变为 1ch，而间隙 (transparent) 在破折号之后立即开始并到达 1.5ch。

它附加在输入的左侧和底部 - 这是background-position 组件（0% 水平和100% 垂直）。

它水平分布在整个输入中 (100%) 并且是 2px 高 - 这是 background 的 background-size 组件。

生成这个 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;
  }
}

你可以调整间隙和其他东西here。

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/