Html 如何设置输入字段编号的样式&；firefox上的向下按钮

我试图在FF上设置输入字段编号的向上和向下按钮的样式。我已经用下面的代码在chrome上成功地实现了这一点，但在FF上我找不到任何CSS技巧

我不能用JS来做这个

是否可以在FF中使用CSS设置上下样式？如果是，怎么做我只需要在最新版本上实现这一点

DOM

<div class="productQty">
    <span></span>
    <input type="number" max="10" min="1" class="mod"/>
</div>

它在chrome上的外观如何？它应该是什么样子

FF 38的外观如何

---

您不能直接将css应用于FF上的按钮，有一个错误报告：

如果不介意对包含的元素应用一些css，可以使用

：before

和

：after

覆盖自定义按钮

div:before，div:after{
显示：块；
位置：绝对位置；
宽度：14px；
高度：8px；
线高：8px；
背景色：#ccc；
左：136px；
z指数：1；
字体大小：9px；
文本对齐：居中；
指针事件：无；
}
部门：以前{
内容：“+”；
顶部：11px；
}
部门：之后{
内容：“-”；
顶部：20px；
}

---

您能用JSFIDLE发送代码吗？请注意，供应商的前缀可能与此有关。你看过评论中的演示了吗？tbh你最好自己制作。浏览器支持在最好的情况下可能是不可靠的，所以我建议定制一个。虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能会变得无效。错误报告实际上没有说太多：只是它当前不起作用。该注释仅表示您的答案已被标记为删除。如果其他评论员同意，而您没有对答案进行更改，那么您将删除“答案”，但这些“自定义按钮”不起作用；它们不起作用，因此“指针事件：无”。通过这种方式，“单击”通过“样式化元素”实际“单击”功能按钮。。。

input[type="number"] {
    height: 30px;
    width: 60px;
    font-size: 18px;
    position: relative;
    background-color: transparent;
    border: none;
    -moz-appearance: textfield;
}
.productQty span {
    display: block;
    width: 41px;
    height: 30px;
    background: white;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border: solid 1px #999999;

}

/* Spin Buttons modified */

input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: transparent url("../img/updown.png") no-repeat center center;
    width: 16px;
    height: 100%;
    opacity: 1; /* shows Spin Buttons per default (Chrome >= 39) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
input[type="number"].mod::-moz-inner-spin-button:hover,
input[type="number"].mod::-moz-inner-spin-button:active{
    border: none;
}

/* Override browser form filling */
input:-webkit-autofill {
    background: black;
    color: red;
}