WebKit内核浏览器（Chrome、Edge、Safari等） #

你之前的代码问题在于：一是color属性不能同时传入两个值，二是未重置微调按钮的默认外观。正确做法是先移除默认样式，再自定义背景和箭头样式：

/* 重置WebKit微调按钮默认外观 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  /* 设置背景透明 */
  background-color: transparent;
  position: relative;
}

/* 自定义向上箭头 */
input[type="number"]::-webkit-inner-spin-button::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 6px;
  height: 6px;
  border-right: 2px solid #e4a9c4;
  border-top: 2px solid #e4a9c4;
}

/* 自定义向下箭头 */
input[type="number"]::-webkit-inner-spin-button::after {
  content: "";
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 2px solid #e4a9c4;
  border-bottom: 2px solid #e4a9c4;
}

Firefox浏览器 #

Firefox的微调按钮有独立伪元素，可直接设置背景和箭头颜色：

/* 向上微调按钮 */
input[type="number"]::-moz-number-spin-up {
  background-color: transparent;
  color: #e4a9c4;
}

/* 向下微调按钮 */
input[type="number"]::-moz-number-spin-down {
  background-color: transparent;
  color: #e4a9c4;
}

简化方案（仅实现背景透明） #

如果不需要自定义箭头形状，WebKit内核浏览器可简化代码：

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  /* 可选：通过滤镜调整箭头颜色匹配#e4a9c4 */
  filter: invert(40%) sepia(30%) saturate(1000%) hue-rotate(310deg);
}

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