CSS⾃适应内容宽度的输⼊框
⽬前我所知道的有两种⽅式，相信不难到
1、给普通 div 标签设置 contenteditable="true"，设置 inline-block 以后，就可以⾃适应内容宽度了
2、将 input 的输⼊内容同步到⼀个透明的 div ，⽗级宽度跟随 div 的宽度，然后设置 input 为绝对定位并覆盖在上⾯，设置宽度为
100%
都是很不错的⽅案。这次带来⼀个全新的纯 CSS 实现⽅案，相信能带来不⼀样的感受
⼀、可替换元素
⾸先，input 不同于普通的 div 元素，它是⼀个可替换元素在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是⼀种外部对象，它们外观的渲染，是独⽴于 CSS 的。
正常情况下，如果希望⼀个元素宽度由内部决定，可以设置
1div{
2  display: inline-block;
3}
在 CSS3 中，还可以通过另⼀种⽅式实现
1div{
2  width: fit-content;
3}
但是，在 input 中，这些都不好使了，从开发者⼯具也可以看到，input 还有⼀层 shadow-root
并且浏览器也没有暴露出相关的选择器供开发者使⽤，因此，仅仅通过常规⽅式是不能实现⾃适应内容宽度的。
⼆、下划线样式
看到效果图中的输⼊框能想到什么？没错，就是下划线。下划线是⽂本修饰的⼀种，是跟随⽂字⾛的，所以去除 input 的边框后，加上下划线
1input{
2  border: 0;
3  outline: 0;
4  text-decoration: 4px solid underline;
5}
下划线确实出来了，⽽且也是跟随输⼊内容的，不过有点贴的太紧了
三、下划线偏移
为了解决上述这个问题，需要⽤到⼀个新的 CSS 属性 text-underline-offset，表⽰下划线偏移位置。⽬前来说，兼容性还算不错，除了 IE，主流浏览器均⽀持了。
现在，给下划线偏移⼀点距离
1input{
2  /* */
3  text-underline-offset: 10px;
4}
下划线居然不见了！如下text-underline-offset 从 0px → 10px 的变化
这是由于内部尺⼨的问题，下划线已经偏移出容器之外了，试着给 input 添加⾼度，⽐如
1input{
2  /* */
3  height: 60px;
4  text-underline-offset: 10px;
5}
但是，没什么效果。
从开发者⼯具中可以看到，外⾯设置的⾼度并不能影响到内部尺⼨，所以内部仍然是默认的⾼度
input标签placeholder属性
那么，还有什么办法可以改变⾼度呢？
答案就是⾏⾼line-height！
1input{
2  /* */
3  line-height: 2;
4  text-underline-offset: 10px;
5}
⾏⾼属于⽂本属性，可以继承到内部，这样内部尺⼨就直接被撑开了，下划线也可见了。
四、默认最⼩宽度
由于使⽤的是下划线，当输⼊框没有内容时，或者仅仅只有 placeholder，下划线是不存在的，⽐如
<input placeholder="请输⼊...">
可能觉得有些不好看，希望加上⼀个最⼩宽度的下划线（当然需要设计来定夺）
这时，可以⽤线性渐变画⼀条下划线就可以了
1input{
2  background: linear-gradient(currentColor,currentColor) center bottom 6px no-repeat;
3  background-size: 10rem 4px;
4}
这样就有⼀个类似最⼩宽度的效果了
需要注意的是，下划线的位置和线性渐变的位置要保持⼀致
五、聚焦的样式
现在加上⼀点聚焦的样式，看起来更像⼀个输⼊边框，下划线需要改变颜⾊，然后刚才的线性渐变也需要改变颜⾊
1input:focus{
2  text-decoration-color: dodgerblue;
3  background-image: linear-gradient(dodgerblue,dodgerblue)
4}
六、总结和说明
以上介绍了⼀种全新的可以实现⾃适应内容宽度的纯 CSS ⽅案，⽤到了平时不太起眼的下划线相关样式，如果你的项⽬不⽤兼容 IE，也刚好有这⽅⾯的需求，就可以放⼼⽤起来了，不过，就算⽤不上，也可以学习⼀下思路。下⾯总结⼀下要点：
1. input 是⼀个可替换元素
2. 下划线是跟随⽂本的，⽽不是容器
3. 现在有⼀个全新的 text-underline-offset 可以⽤来控制下划线的偏移
4. 输⼊内容为空时下划线也就不存在了
5. 利⽤ CSS 渐变可以绘制⼀个下划线
6. 下划线颜⾊可以通过⽂本修饰颜⾊ text-decoration-color 修改
还有⼀个⼩细节时，input 其实是设置了宽度为 100% 的，也就是整⾏都可以输⼊，只是视觉上看着好像是下划线那⼀部分是输⼊框⽽已，算是⼀个⼩⼩的障眼法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。