通常我们看到的输入框都是固定宽度的，但有时我们也会遇到内容宽度自适应的情况。目前我知道的有两种方式，相信不难找到。为普通的div标签设置contenteditable="true"。设置inline-block后，可以自适应内容的宽度。将input的输入内容同步到一个透明的div中。parent的宽度跟随div的宽度，然后设置input为Absolute定位覆盖在顶部，设置width为100%是一个很好的解决方案。这次带来全新的纯CSS实现，相信能带来不一样的感受1.可替换元素首先，input不同于普通的div元素，它是可替换元素在CSS中，可替换元素（replacedelement）是不受控制的通过CSS。这些元素是外部对象，其外观独立于CSS呈现。一般情况下，如果你想让一个元素的宽度在内部确定，你可以设置div{display:inline-block;}在CSS3中，你也可以通过另一种方式实现div{width:fit-content;}属性，可以参考这篇文章：理解CSS3max/min-content和fit-content等宽度值?张欣旭-欣空间-欣生活(zhangxinxu.com)然而，在输入中，这些并不容易使用。从development中也可以看到，input有一层shadow-root，浏览器并没有暴露相关的选择器给开发者使用。因此，仅通过常规方法无法实现自适应内容宽度。2.下划线样式看到效果图中的输入框你能想到什么？没错，下划线。下划线是一种文字装饰，它跟在文字后面，所以去掉input的边框后，再添加一个下划线input{border:0;大纲：0；text-decoration:4pxsolidunderline;}效果如下下划线确实出来了，而且也跟在输入内容后面，但是有点太紧了。3、下划线偏移为了解决上述问题，需要一个新的CSS属性text-underline-offset来表示下划线的偏移位置。目前兼容性还不错。除IE外，主流浏览器均支持。现在，从下划线输入偏移一点距离{/**/text-underline-offset:10px;}下划线实际上没有了！下面的text-underline-offset从0px→10px变化。这是由于内部尺寸问题。下划线已移出容器。尝试给input加上高度，比如input{/**/height:60px;text-underline-offset:10px;}但是没有效果。从开发者工具可以看出，外面设置的高度不会影响里面的尺寸，所以里面还是默认的高度。那么，有什么办法可以改变高度吗？答案是行高line-height！输入{/**/行高：2；text-underline-offset:10px;}行高属于text属性，可以继承到里面，这样内部尺寸直接拉伸，下划线也可见4.默认最小因为宽度有下划线，当输入框没有内容，或者只有占位符时，下划线不存在。比如
