Wie erstellt man ein Eingabe-Textfeld mit 7 Zeichen in HTML und CSS (Screenshot im Anhang)?

Question

Ich bin ein UI für eine mobile app Schaffung I erforderlich bin eine popover mit der UI im screenshot.How angebracht erstellen 7 Zeichen unterstrichen Eingabetextfeld in HTML und CSS wie das unter einem schaffen?

---

HTML-Code

<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-Code

.contact-details-modal { 
    top: 15%; 
    border-radius: 3px; 
    -webkit-border-radius: 3px; 
    min-height: 70% !important; 
    width: 80%; 
    left: 10%; 
} 

Answer 1

eine maximale Länge von Zeichen an einen Eingang hinzufügen.

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

size="7" Hinzufügen ist eine einfache Möglichkeit, auch die Breite der Eingangsleistungs-Einstelleinheit die 7 Zeichen enthalten. Aber es ist besser, dies in CSS zu behandeln.

Und geben Sie ihm das richtige Styling.

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

Zuerst stelle ich border-0 alle Grenze Styling zu entfernen, nach dem ich Styling-Set für border-bottom. Auf diese Weise werden nur zwei Codezeilen anstelle von vier Codezeilen benötigt, wenn der gesamte Rahmen oben, rechts, unten und links gestylt wird.

aktualisiert
https://jsfiddle.net/1q3h8qeh/

Answer 2

Hier ist eine Lösung, die ein einzelnes Textfeld mit Unterstreichungen unter jedem Zeichen erzeugt (versuchen zu löschen und eine andere Nummer in dem input Feld zu schreiben):

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

Dies verwendet the ch unit, deren Breite die Breite des 0 Zeichens ist. Es nimmt auch an, dass die Schriftart in dem Feld input ein Monospace eins ist, so dass alle Zeichen die gleiche Breite haben.

Also die Breite für jedes Zeichen ist immer 1ch. Die Lücke zwischen den Zeichen wird als .5ch angenommen. Dies ist der Wert, den wir für letter-spacing festgelegt haben. Die width der input ist die Anzahl der Zeichen mal die Summe zwischen der Briefbreite (1ch) und der Lückenbreite (.5ch). Das ist also .

Wir entfernen die tatsächliche border der input und wir setzen eine gefälschte mit einer repeating-linear-gradient. Das Armaturenbrett (dimgrey) geht von 0 zu 1ch und die Lücke (transparent) beginnt unmittelbar nach dem Armaturenbrett und geht zu 1.5ch.

Es ist an der linken und unteren Seite des Eingangs angeschlossen - das ist die background-position Komponente (0% horizontal und 100% vertikal).

Es breitet sich über den gesamten Eingangs horizontal (100%) und ist 2px tall - das ist die Komponente des background-sizebackground.

Der Sass Code, der diese CSS generiert ist:

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

Sie können here die Lücke und andere Dinge optimieren.