入力停止のデフォルトテキストが入力に長すぎる場合の整列

Question

入力フィールドの長さは最大4文字です。これらの4文字が実際には入力フィールドの上に表示される3行の境界線で区切られているように見えます。

私が4番目の文字を入力すると、潜在的な5番目の文字が入力されても見えないため、すべての文字が少し左にジャンプしています。フォーカスが入力フィールドにない場合は、文字がうまく整列しています。

この問題をcss、js、またはjqueryで解決する方法はありますか？これは変更できないブラウザからの動作ですか？

.pin-field-wrapper { 
 
    width: 175px; 
 
    height: 72px; 
 
    border-radius: 0px 13px 13px 0px; 
 
    border-left: 1px solid #2A2A2A; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.pin-field { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 0px 13px 13px 0px; 
 
    text-align: left; 
 
    font-size: 44px; 
 
    letter-spacing: 21px; 
 
    padding-left: 8px; 
 
    border: none; 
 
    box-shadow: inset 0px 6px 6px -4px rgba(0, 0, 0, 0.96); 
 
} 
 

 
.pin-field-separator { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 1px; 
 
    background: #000; 
 
    top: 0px; 
 
    cursor: text; 
 
} 
 

 
.separator1 { 
 
    left: 25%; 
 
} 
 

 
.separator2 { 
 
    left: 50%; 
 
} 
 

 
.separator3 { 
 
    left: 75%; 
 
}

<div class="pin-field-wrapper"> 
 
    <input type="text" class="pin-field" placeholder="0000" maxlength="4"> 
 
    <div class="pin-field-separator separator1"></div> 
 
    <div class="pin-field-separator separator2"></div> 
 
    <div class="pin-field-separator separator3"></div> 
 
</div>

Answer 1

あなたのフォントサイズがinputフィールドの幅と一致していません。フォントサイズを広げたり、フォントサイズを小さくするだけです。

.pin-field-wrapper { 
 
    width: 200px; 
 
    height: 72px; 
 
    border-radius: 0px 13px 13px 0px; 
 
    border-left: 1px solid #2A2A2A; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.pin-field { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 0px 13px 13px 0px; 
 
    text-align: left; 
 
    font-size: 44px; 
 
    letter-spacing: 21px; 
 
    padding-left: 8px; 
 
    border: none; 
 
    box-shadow: inset 0px 6px 6px -4px rgba(0, 0, 0, 0.96); 
 
} 
 

 
.pin-field-separator { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 1px; 
 
    background: #000; 
 
    top: 0px; 
 
    cursor: text; 
 
} 
 

 
.separator1 { 
 
    left: 20%; 
 
} 
 

 
.separator2 { 
 
    left: 44%; 
 
} 
 

 
.separator3 { 
 
    left: 69%; 
 
}

<div class="pin-field-wrapper"> 
 
    <input type="text" class="pin-field" placeholder="0000" maxlength="4"> 
 
    <div class="pin-field-separator separator1"></div> 
 
    <div class="pin-field-separator separator2"></div> 
 
    <div class="pin-field-separator separator3"></div> 
 
</div>