当前位置: 首页 > Web前端 > CSS

-input-宽度自适应变化

时间:2023-03-31 00:58:41 CSS

实现上面的效果:输入框的宽度随着输入文本的长度而变化。标签有自己的想法。如果你没有为它设置固定宽度,它就会有一个默认的恒定宽度。不可能让它动态拉伸。那我们该怎么办呢?然后将它的宽高设置为100%,让它随父元素变化,如何确定父元素的宽高呢?给一个标签来支持,的宽高可以根据其内部内容动态变化。当然,它的内部内容是和的输入内容同步的。把标签隐藏在标签下,暗中掌控全局。{{inputValue}}

....add-tag{颜色:#333;边框样式:虚线;填充:0;位置:相对;span{显示:内联块;最小宽度:184px;高度:100%;填充:032px;}输入{显示:内联块;位置:绝对;左:0;宽度:100%;高度:100%;字体大小:28px;插入符号颜色:#426BF2;::-webkit-input-placeholder{颜色:#aaa;}边框半径:40px;边框样式:无;填充:032px;}}