如何让CSS min-content识别input内容值且不使用JS设置宽度

实现方案 #

原生<input>属于替换元素，固有尺寸不受内部输入内容影响，所以min-content/max-content仅会调用浏览器预设的固定宽度，无法识别输入框的value值。可以通过CSS Grid配合内容同步的方式实现需求，全程不需要用JS修改width、min-width、max-width属性：

代码示例 #

<div class="input-wrapper">
  <!-- 仅同步输入内容到自定义属性，不修改任何宽度相关属性 -->
  <input type="text" oninput="this.parentElement.dataset.value = this.value" value="默认内容">
</div>

.input-wrapper {
  display: inline-grid;
  border: 1px solid #000;
  font: inherit;
  vertical-align: top;
}

/* 用伪元素承接输入内容，负责撑开容器宽度 */
.input-wrapper::after {
  content: attr(data-value);
  /* 保留空格、换行，和输入框表现对齐 */
  white-space: pre;
  /* 仅用于撑宽度，不展示 */
  visibility: hidden;
  padding: 2px 4px;
  /* 和输入框共用同一网格单元格 */
  grid-area: 1 / 1 / 2 / 2;
}

.input-wrapper input {
  grid-area: 1 / 1 / 2 / 2;
  border: none;
  outline: none;
  padding: 2px 4px;
  /* 宽度跟随容器，由伪元素内容决定 */
  width: 100%;
  font: inherit;
}

实现说明 #

• 所有宽度计算完全由CSS完成，JS仅负责同步输入内容到自定义属性，没有操作任何宽度相关样式，符合要求
• 若只需实现固定value的自适应宽度，不需要实时输入适配，可以直接把内容写在.input-wrapper的data-value属性中，连JS都不需要
• 可根据需要调整容器的边框、内边距、字体等样式，只要保持输入框和伪元素的文本样式、内边距一致，就能保证宽度完全匹配输入内容

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