[英]How to remove letter-spacing for the last letter of an input field with CSS?
I am trying to partition input field to appear as separate input fields on screen to looks like otp field.我正在尝试将输入字段分区为在屏幕上显示为单独的输入字段,使其看起来像 otp 字段。 I achieved it to some extend from the other SO answer.
我从其他 SO 答案中实现了它。 But still i couldn't get the exact UI result.
但我仍然无法获得确切的 UI 结果。
My code HTML我的代码 HTML
<div id="divOuter">
<div id="divInner">
<input id="partitioned" type="text" maxlength="4"/>
</div>
</div>
CSS CSS
#partitioned {
padding-left: 15px;
margin-right: -42px;
letter-spacing: 42px;
border: 0;
background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
background-position: bottom;
background-size: 50px 1px;
background-repeat: repeat-x;
background-position-x: 35px;
width: 190px;
min-width: 190px;
}
#divInner {
left: 0;
position: sticky;
}
#divOuter {
width: 190px;
overflow: hidden;
}
I couldn't find the solution.我找不到解决方案。 Need some help.
需要一些帮助。
The width of #partitioned
is too small, and is causing the input field to scroll horizontally to accommodate the last digit. #partitioned
的宽度太小,导致输入字段水平滚动以容纳最后一位数字。 Change the width to width: 220px;
将宽度更改为
width: 220px;
and this will fix it:这将解决它:
https://jsfiddle.net/yx1guj3s/ https://jsfiddle.net/yx1guj3s/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.