<div class="otp-input-wrapper">
<input type="text" maxlength="4" pattern="[0-9]*" autocomplete="off">
<svg viewBox="0 0 240 1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="240" y2="0" stroke="#3e3e3e" stroke-width="2" stroke-dasharray="44,22" />
</svg>
</div>
.otp-input-wrapper {
width: 240px;
text-align: left;
display: inline-block;
}
.otp-input-wrapper input {
padding: 0;
width: 264px;
font-size: 32px;
font-weight: 600;
color: #3e3e3e;
background-color: transparent;
border: 0;
margin-left: 12px;
letter-spacing: 48px;
font-family: sans-serif !important;
}
.otp-input-wrapper input:focus {
box-shadow: none;
outline: none;
}
.otp-input-wrapper svg {
position: relative;
display: block;
width: 240px;
height: 2px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.