I have a query regarding an input field with a maximum length of 4 characters. The appearance is such that these 4 characters seem to be delineated by borders which are actually 3 lines displayed above the input field.
When I enter the fourth character, all the characters shift slightly to the left to accommodate the possibility of a fifth character being entered. However, when the input field loses focus, the characters align as expected.
Is there a way to address this issue using CSS, JavaScript, or jQuery? Or is this behavior dictated by the browser and cannot be altered?
.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>