样式化输入 type=number

Question

是否可以在 CSS 中的 <input type="number"> 的内部“向上箭头”和“向下箭头”中应用样式？我想将向上箭头的背景更改为蓝色，将向下箭头的背景更改为红色。有任何想法吗？

原文由 Savrige 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新 17/03/2017

原始解决方案将不再有效。微调器是 shadow dom 的一部分。现在只是为了隐藏在 chrome 中使用：

 input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

 <input type="number" />

或者总是显示：

 input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}

 <input type="number" />

您可以尝试以下操作，但请记住这 仅适用于 Chrome ：

 input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

 <input type="number" />

原文由 Alex Char 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于 Mozilla

 input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0;
}

对于铬

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
}

原文由 saghar.fadaei 发布，翻译遵循 CC BY-SA 4.0 许可协议