html5如何自动变化宽度,<input> 宽度自适应变化

要实现上述的效果：输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。那怎么办呢？

那就设置它的宽高都为100%，让它随着父元素改变，那父元素的宽高如何确定呢？给个标签来撑起来，的宽高就可以根据它内部的内容来动态改变宽高啦，它内部的内容当然就是与输入的内容同步了，把标签隐藏在标签下面，暗搓搓地操控全局。

...

.add-tag {

color: #333;

border-style: dashed;

padding: 0;

position: relative;

span {

display: inline-block;

min-width: 184px;

height: 100%;

padding: 0 32px;

}

input {

display: inline-block;

position: absolute;

left: 0;

width: 100%;

height: 100%;

font-size: 28px;

caret-color: #426BF2;

::-webkit-input-placeholder {

color: #aaa;

}

border-radius: 40px;

border-style: none;

padding: 0 32px;

}

}