एचटीएमएल और सीएसएस (स्क्रीनशॉट संलग्न) में 7 वर्ण अंडरलाइन इनपुट टेक्स्ट फ़ील्ड कैसे बनाएं?

Question

मैं मैं यूआई screenshot.How में संलग्न के साथ एक पॉपओवर एक 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> 

सीएसएस कोड

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

Answer 1

एक इनपुट के लिए चरित्र की एक अधिकतम लंबाई जोड़ें।

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

size="7" जोड़ने से भी इनपुट की चौड़ाई 7 वर्ण शामिल की स्थापना के लिए एक आसान तरीका है। लेकिन सीएसएस में इसे संभालना बेहतर है।

और इसे उचित स्टाइल दें।

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

सबसे पहले मैं 0 करने के लिए border सेट सभी सीमा स्टाइल, जिसके बाद मैं border-bottom के लिए स्टाइल सेट हटाने के लिए। इस तरह से सभी सीमावर्ती शीर्ष, दाएं, नीचे और बाएं स्टाइल करते समय चार की बजाय कोड की केवल दो पंक्तियां होती हैं।

अद्यतन
https://jsfiddle.net/1q3h8qeh/

Answer 2

यहाँ एक समाधान है कि हर किरदार के तहत रेखांकन के साथ एक एकल पाठ क्षेत्र पैदा करता है (हटाने और 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=''/>

यहका उपयोग करता है 210 जिसका चौड़ाई 0 चरित्र की चौड़ाई है। यह भी मानता है कि input फ़ील्ड में फ़ॉन्ट एक मोनोस्पेस है ताकि सभी वर्णों की एक ही चौड़ाई हो।

तो प्रत्येक चरित्र की चौड़ाई हमेशा 1ch है। पात्रों के बीच का अंतर .5ch माना जाता है। यह वह मान है जिसे हमने letter-spacing के लिए सेट किया है। के 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 घटक है।

सास कोड है कि इस सीएसएस उत्पन्न करता है:

$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 ठीक कर सकते हैं।