CSS 自适应内容宽度的输入框

CSS 自适应内容宽度的输入框

摘要

通常我们见到的输入框都是宽度固定的，但有时也会碰到自适应内容宽度的。

目前我所知道的有两种方式，相信不难找到：

1. 给普通 div 标签设置 contenteditable="true"，设置 inline-block 以后，就可以自适应内容宽度了
2. 将 input 的输入内容同步到一个透明的 div ，父级宽度跟随 div 的宽度，然后设置 input 为绝对定位并覆盖在上面，设置宽度为 100%

都是很不错的方案。这次带来一个全新的纯 CSS 实现方案，相信能带来不一样的感受。