是否可以在 CSS 中 <input type="number"> 的内部“向上箭头”和“向下箭头”中应用样式？我想将向上箭头的背景更改为蓝色，将向下箭头的背景更改为红色。有什么想法吗？
【问题讨论】：
2017 年 3 月 17 日更新
原来的解决方案不再有效。微调器是 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" />【讨论】：
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;
}
【讨论】：
我稍微修改了@LcSalazar 的答案......它仍然不完美，因为在 Firefox、Chrome 和 Opera 中仍然可以看到默认按钮的背景（未在 Safari 中测试）；但点击箭头仍然有效
注意事项：
pointer-events: none; 允许您单击重叠按钮，但是您无法在悬停时设置按钮样式。.number-wrapper {
position: relative;
}
.number-wrapper:after,
.number-wrapper:before {
position: absolute;
right: 5px;
width: 1.6em;
height: .9em;
font-size: 10px;
pointer-events: none;
background: #fff;
}
.number-wrapper:after {
color: blue;
content: "\25B2";
margin-top: 1px;
}
.number-wrapper:before {
color: red;
content: "\25BC";
margin-bottom: 5px;
bottom: -.5em;
}<span class='number-wrapper'>
<input type="number" />
</span>【讨论】：
与其他答案略有不同，使用类似的概念，但使用 div 而不是伪类：
input {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
height: 20px;
padding: 0px;
font-size: 14pt;
border: solid 0.5px #000;
z-index: 1;
}
.spinner-button {
position: absolute;
cursor: default;
z-index: 2;
background-color: #ccc;
width: 14.5px;
text-align: center;
margin: 0px;
pointer-events: none;
height: 10px;
line-height: 10px;
}
#inc-button {
left: 46px;
top: 10.5px;
}
#dec-button {
left: 46px;
top: 20.5px;
}<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>【讨论】：
我一直在手机和平板电脑上苦苦挣扎。我的解决方案是在微调器上使用absolute 定位，所以我只是发布它以防它帮助其他人：
<html><head>
<style>
body {padding: 10px;margin: 10px}
input[type=number] {
/*for absolutely positioning spinners*/
position: relative;
padding: 5px;
padding-right: 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
width: 25px;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
</style>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
</head>
<body >
<input type="number" value="1" step="1" />
</body></html>【讨论】：
好主意……
您可以使用一些伪元素，并创建 css 内容十六进制代码的上/下箭头。唯一的挑战是精确定位箭头，但它可能会起作用：
input[type="number"] {
height: 100px;
}
.number-wrapper {
position: relative;
}
.number-wrapper:hover:after {
content: "\25B2";
position: absolute;
color: blue;
left: 100%;
margin-left: -17px;
margin-top: 12%;
font-size: 11px;
}
.number-wrapper:hover:before {
content: "\25BC";
position: absolute;
color: blue;
left: 100%;
bottom: 0;
margin-left: -17px;
margin-bottom: -14%;
font-size: 11px;
}<span class='number-wrapper'>
<input type="number" />
</span>【讨论】：
上面的 chrome 代码运行良好。我在 mozila 中尝试过这样的方法，但它不起作用。我找到了解决方案
对于mozila
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
谢谢 桑吉布
【讨论】：
修改微调器箭头的css是钝的和不可靠的跨浏览器。
我发现的最稳定的选项是使用指针事件绝对定位图像：无；在旋转器的顶部。
在 Edge 中未经测试，但适用于所有其他浏览器。
【讨论】：
在 Edge 中测试，这可以隐藏 Edge 中的箭头...
input[type=number]::-webkit-inner-spin-button, ::-webkit-outer-spin-button{
opacity: 0;
}
【讨论】：