I am currently working on an input field that is styled using CSS for digit entry. However, I am facing issues with the variations in character or digit width, causing them to misplace upon rendering. My project involves VUE and Laravel development, and I would appreciate any assistance in rectifying this issue.
Here is the SCSS code snippet:
<style lang="scss" scoped>
//$char-w: 2ch;
//$gap: .5*$char-w;
//$n-char: 4;
//$in-w: $n-char*($char-w + $gap);
$char-w: 1.5ch;
$gap: $char-w;
$n-char: 4;
$in-w: $n-char*($char-w + $gap);
$letter-spacing: ($in-w - ($n-char*$char-w))/$n-char;
input.digit {
display: block;
//margin: 2em auto;
margin: 5px;
border: none;
padding: 0;
direction: ltr;
width: $in-w;
background: repeating-linear-gradient(90deg,
dimgrey 0, dimgrey $char-w,
transparent 0, transparent $char-w + $gap) 0 100%/ #{$in-w - $gap} 2px no-repeat;
//font: "IRANSans Medium", monospace;
//letter-spacing: $gap;
letter-spacing: $letter-spacing;
&:focus {
outline: none;
//color: dodgerblue;
}
}
</style>
And here is the HTML section:
</div>
<input class="digit"
type="text"
maxlength='4'
:disabled="isDisabled.code" value="1111">
<input class="digit"
type="text"
maxlength='4'
:disabled="isDisabled.code" value="5555">
<input class="digit"
type="text"
maxlength='4'
:disabled="isDisabled.code" value="1234">
</div>
The current output looks like this: result