When I enter a four-digit number (verification code) in the form input, the structure of the PIN-code breaks down after entering the fourth digit. The text pointer moves to the fifth character even though I have defined only four characters.
Is there a CSS or JavaScript solution to fix this issue?
.pinBox {
display: inline-block;
overflow: hidden;
position: relative;
direction: ltr;
text-align: left;
}
.pinBox:before {
position: absolute;
left: 0;
right: 0;
content: '';
pointer-events: none;
display: block;
height: 75px;
width: 300px;
background-image: url(https://i.sstatic.net/JbkZl.png);
}
.pinEntry {
position: relative;
padding: 16px 29px;
font-family: courier, monospaced;
font-size: xx-large;
border: none;
outline: none;
width: 302px;
letter-spacing: 55px;
background-color: transparent;
overflow: hidden;
text-align: left;
direction: ltr;
}<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.css"/>
<form role="form" method="POST" action="">
<div class="row my-4">
<div class="col-12 text-center">
<div class="pinBox">
<input class="pinEntry" name="token" type="text" maxlength="4" value="">
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary mt-2">submit</button>
</div>
</form>Check out the demo on jsfidde