如何实现纯CSS下文本输入框随输入自动扩展且兼容多浏览器

解决方案 #

要实现纯文本输入、宽度随内容从近似0增长至80vw、无JS、全浏览器兼容的需求，可以利用CSS原生属性结合原生<input type="text">的特性来完成：

基础实现

HTML

<input type="text" autofocus />

CSS

input[type="text"] {
  /* 核心逻辑：宽度随内容自适应，限制最大宽度 */
  width: fit-content;
  max-width: 80vw;
  /* 移除浏览器默认最小宽度，让初始宽度尽可能小 */
  min-width: 0;
  /* 重置样式，视觉上贴近"从0开始"的效果 */
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid #333;
  outline: none;
  padding: 0;
  font-size: 1rem;
}

关键特性说明

• 纯文本保障：依赖原生<input type="text">的特性，天然只允许纯文本输入，不会出现contenteditable可粘贴HTML的问题。
• 兼容性：fit-content属性支持所有现代浏览器（含Firefox、Safari）及IE11，完全满足多浏览器兼容要求。
• 动态宽度：输入内容时宽度自动随文本长度增长，达到80vw后不再扩展。

进阶：严格初始0宽度

如果需要输入框初始状态完全隐藏（宽度为0），可配合容器和:focus-within伪类实现：

HTML

<div class="input-wrapper">
  <input type="text" autofocus />
</div>

CSS

.input-wrapper {
  display: inline-block;
  max-width: 80vw;
  /* 初始容器宽度为0 */
  width: 0;
}

/* 输入框获得焦点时，容器自适应内容宽度 */
.input-wrapper:focus-within {
  width: fit-content;
}

.input-wrapper input[type="text"] {
  width: 100%;
  min-width: 0;
  border: none;
  border-bottom: 1px solid #333;
  outline: none;
  padding: 0;
  font-size: 1rem;
}

这个方案会让输入框在未激活时完全隐藏，输入时才从0开始展开宽度，更贴合需求。

内容的提问来源于stack exchange，提问作者Player_X_YT