如何限制HTML text类型input输入框的显示区域大小？

HTML原生size属性仅作为浏览器渲染输入框宽度的参考值，不具备强制约束性。出现拉伸通常是两个原因导致的：

• 页面引入的CSS重置/全局样式默认给input设置了width: 100%这类全宽属性，覆盖了size的默认表现
• 输入框的父容器为弹性布局/网格布局，子元素默认会被拉伸填充父容器可用宽度

方案1：行内样式快速修复 #

直接在标签上添加强制宽度约束，推荐使用ch单位（1ch等于当前字体下阿拉伯数字0的宽度，和maxlength属性适配度更高）：

<input type="text" maxlength="8" size="8" style="width: 8ch; box-sizing: border-box;">

box-sizing: border-box用来避免输入框的内边距、边框额外撑大总宽度。

方案2：CSS类统一管理 #

如果有多个同规则的输入框，可以定义专用CSS类：

.input-short-8 {
  width: 8ch;
  max-width: 8ch;
  box-sizing: border-box;
  /* 如果父级是flex布局，额外加下面一行取消拉伸 */
  flex: none;
}

标签调用方式：

<input type="text" maxlength="8" class="input-short-8">

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