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

出处:juejin.cn

摘要

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

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

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

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

欢迎在评论区写下你对这篇文章的看法。

首页 - Wiki
Copyright © 2011-2022 iteam. Current version is 2.80.4. UTC+08:00, 2022-01-17 12:53
浙ICP备14020137号-1 $访客地图$