纯CSS实现带箭头及内置标签的自定义input type=number样式

核心需求的实现方案与局限 #

1. 视觉定制：自定义箭头+内置标签（纯CSS可实现） #

隐藏原生箭头

首先消除浏览器默认的number输入框箭头，避免原生样式干扰：

/* 适配WebKit内核浏览器（Chrome/Safari） */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 适配Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

模拟自定义箭头

通过容器伪元素创建自定义箭头，可根据附图调整颜色、大小、位置：

.number-input-wrapper {
  position: relative;
  display: inline-block;
}
/* 向上箭头 */
.number-input-wrapper::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 25%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #666;
  cursor: pointer;
}
/* 向下箭头 */
.number-input-wrapper::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 25%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666;
  cursor: pointer;
}

输入框内置文本标签

利用输入框伪元素添加内置标签，通过pointer-events: none确保不干扰输入操作：

input[type="number"] {
  padding-left: 50px; /* 为标签预留空间 */
  height: 32px;
  line-height: 32px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
input[type="number"]::before {
  content: '商品数量:';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}

2. 箭头点击增减数字（纯CSS无法实现） #

CSS仅负责视觉呈现和基础样式控制，没有能力修改输入框的value属性值。要实现点击箭头增减数字的交互逻辑，必须配合JavaScript：

• 监听自定义箭头的点击事件
• 获取输入框当前数值，完成增减计算后更新value

总结 #

• 所有视觉层面的定制需求（箭头样式、内置标签）可以完全通过纯CSS实现；
• 点击箭头增减数字的交互功能，无法仅靠纯CSS完成，必须结合JavaScript实现核心逻辑。

内容的提问来源于stack exchange，提问作者gil.code