宽度由内容决定,CSS实现input宽度根据输入内容自适应"/>
html设置input宽度由内容决定,CSS实现input宽度根据输入内容自适应
input 宽度根据输入的内容自适应的应用场景不是很常见,但不排除有特殊需求的情况,例如金额输入框一般都希望能完整的看到所输入的金额。
常规的方案是通过JS获取输入的文本长度后乘以文本的宽度,但中英文的文本宽度不相同,所以通过此类方式实现的效果不太理想。
还有一种用html的contenteditable属性来模拟input的方案,这种方案在web中确实可行,但是无法兼容各小程序。
CSS实现该效果的原理:
1、用div嵌套“input”和“label”
2、将“input”输入的内容同步到“label”中,并将“label”设置成不可见
3、将“input”盖在“label”上
看完以上步骤,聪明的你是不是已经猜到实现细节了呢~
其实是用“label”来撑开父容器的宽度,再让“input”的宽度自适应父容器的宽度即可。
具体实现代码:
css部分需要需要注意“input”和“label”的font-family和font-size必须一致
.input-box {
display: inline-flex;
align-items: center;
box-sizing: border-box;
position: relative;
border: 1px solid #000;
border-radius: 5px
更多推荐
html设置input宽度由内容决定,CSS实现input宽度根据输入内容自适应
发布评论