Bootstrap中number输入框设下划线 去箭头限4位输入设固定尺寸

1. 移除输入框右侧多余控制条 #

该控制条是type="number"输入框的原生数字调节按钮，直接追加以下CSS样式即可隐藏，可与你已写的下划线样式合并：

/* 兼容Webkit内核浏览器（Chrome、Edge、Safari等） */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 兼容Firefox浏览器 */
input[type=number] {
  -moz-appearance: textfield;
}

2. 限制最多输入4位数字 #

采用「HTML属性+JS兜底」的方案实现全浏览器兼容：

• 首先在input标签上添加原生约束属性：

  <input type="number" class="form-control form-control-sm" min="0" max="9999" maxlength="4">
  

• 针对部分浏览器对number输入框maxlength属性支持不佳的问题，添加一段简单JS做输入拦截：

  const numberInput = document.querySelector('input[type=number]');
  numberInput.addEventListener('input', function() {
    if (this.value.length > 4) {
      this.value = this.value.slice(0, 4);
    }
  });
  

3. 设置输入框固定尺寸 #

直接在已有的CSS样式中追加宽高属性即可，数值可根据设计需求自行调整，添加后Bootstrap默认的100%宽度会被覆盖，实现固定尺寸效果：

input[type=number] {
  /* 原有下划线样式保留 */
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  outline: none;
  /* 新增固定尺寸配置 */
  width: 120px; /* 固定宽度，按需修改 */
  height: 31px; /* 匹配form-control-sm默认高度，按需修改 */
  padding: 0 2px; /* 可选：调整内边距避免文字贴边 */
}

注意：如果已经给输入框添加了Bootstrap的w-100、栅格col类等强制撑满宽度的类，需要先移除这些类，否则固定宽度会被覆盖。

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