共计 2083 个字符，预计需要花费 6 分钟才能阅读完成。
通常咱们见到的输入框都是宽度固定的，但有时也会碰到自适应内容宽度的，像这样
目前我所晓得的有两种形式，置信不难找到
- 给一般 div 标签设置 contenteditable=”true”，设置 inline-block 当前，就能够自适应内容宽度了
- 将 input 的输出内容同步到一个通明的 div，父级宽度追随 div 的宽度，而后设置 input 为相对定位并笼罩在下面，设置宽度为 100%
都是很不错的计划。这次带来一个全新的纯 CSS 实现计划，置信能带来不一样的感触
一、可替换元素
首先，input 不同于一般的 div 元素，它是一个可替换元素
在 CSS 中， 可替换元素 （replaced element）的展示成果不是由 CSS 来管制的。这些元素是一种内部对象，它们外观的渲染，是独立于 CSS 的。
失常状况下，如果心愿一个元素宽度由外部决定，能够设置
div{display: inline-block;}在 CSS3 中，还能够通过另一种形式实现
div{width: fit-content;}还不太理解这个属性的能够参考这篇文章：了解 CSS3 max/min-content 及 fit-content 等 width 值 « 张鑫旭 - 鑫空间 - 鑫生存 (zhangxinxu.com)
然而，在 input 中，这些都不好使了，从开发者工具也能够看到，input 还有一层 shadow-root
并且浏览器也没有暴露出相干的选择器供开发者应用，因而，仅仅通过惯例形式是不能实现自适应内容宽度的
二、下划线款式
看到效果图中的输入框能想到什么？没错，就是下划线。下划线是文本润饰的一种，是追随文字走的，所以去除 input 的边框后，加上下划线
input{
border: 0;
outline: 0;
text-decoration: 4px solid underline;
}成果如下
下划线的确进去了，而且也是追随输出内容的，不过有点贴的太紧了
三、下划线偏移
为了解决上述这个问题，须要用到一个新的 CSS 属性 text-underline-offset，示意下划线偏移地位。目前来说，兼容性还算不错，除了 IE，支流浏览器均反对了
当初，给下划线偏移一点间隔
input{
/* */
text-underline-offset: 10px;
} 下划线竟然不见了！如下 text-underline-offset 从 0px → 10px 的变动
这是因为外部尺寸的问题，下划线曾经偏移出容器之外了，试着给 input 增加高度，比方
input{
/* */
height: 60px;
text-underline-offset: 10px;
}然而，没什么成果
从开发者工具中能够看到，里面设置的高度并不能影响到外部尺寸，所以外部依然是默认的高度
那么，还有什么方法能够扭转高度呢？
答案就是行高 line-height！
input{
/* */
line-height: 2;
text-underline-offset: 10px;
}行高属于文本属性，能够继承到外部，这样外部尺寸就间接被撑开了，下划线也可见了
四、默认最小宽度
因为应用的是下划线，当输入框没有内容时，或者仅仅只有 placeholder，下划线是不存在的，比方
<input placeholder="请输出...">成果如下
可能感觉有些不难看，心愿加上一个最小宽度的下划线（当然须要设计来定夺）
这时，能够用线性突变画一条下划线就能够了
input{background: linear-gradient(currentColor,currentColor) center bottom 6px no-repeat;
background-size: 10rem 4px;
}这样就有一个相似最小宽度的成果了
须要留神的是，下划线的地位和线性突变的地位要保持一致
五、聚焦的款式
当初加上一点聚焦的款式，看起来更像一个输出边框，下划线须要扭转色彩，而后方才的线性突变也须要扭转色彩
input:focus{
text-decoration-color: dodgerblue;
background-image: linear-gradient(dodgerblue,dodgerblue)
}这样就实现了文章结尾的成果
残缺代码能够拜访：auto input (codepen.io)
六、总结和阐明
以上介绍了一种全新的能够实现自适应内容宽度的纯 CSS 计划，用到了平时不太起眼的下划线相干款式，如果你的我的项目不必兼容 IE，也刚好有这方面的需要，就能够释怀用起来了，不过，就算用不上，也能够学习一下思路。上面总结一下要点：
- input 是一个可替换元素
- 下划线是追随文本的，而不是容器
- 当初有一个全新的
text-underline-offset能够用来管制下划线的偏移 - 输出内容为空时下划线也就不存在了
- 利用 CSS 突变能够绘制一个下划线
- 下划线色彩能够通过文本润饰色彩
text-decoration-color批改
还有一个小细节时，input 其实是设置了宽度为 100% 的，也就是整行都能够输出，只是视觉上看着如同是下划线那一部分是输入框而已，算是一个小小的障眼法。如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤