如何在Firefox上为输入框数字上下按钮设置样式

Question

如何在Firefox上为输入框数字上下按钮设置样式

htmlcssfirefox

5

我正在尝试在Firefox中为输入数字字段的上下按钮设置样式。我已经使用以下代码成功地在Chrome上实现了这一点，但我找不到任何CSS技巧来在Firefox上完成它。

我不能使用JS来做这件事。

是否可能使用CSS在Firefox中为上下按钮设置样式？如果可以，如何实现？ - 我只需要在最新版本上实现这一点

DOM

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

CSS

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;
}

在Chrome上看起来如何以及应该如何呈现

enter image description here

在FF 38上看起来如何

enter image description here

- Jonathan Thurft

请问您能否使用JSFiddle发送代码...谢谢。 - Jaffer Wilson

这些厂商前缀可能与此有关。你看过 https://css-tricks.com/snippets/css/turn-off-number-input-spinners/ 上评论中的演示吗？ - Ruskin

说实话，你最好的选择是自己制作。浏览器支持有时可能会出现问题，因此我建议制作一个自定义的。 - jbutler483

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BillyNate · Answer 1

在FF上，您无法直接应用CSS到按钮上，这是一个关于此问题的错误报告： https://bugzilla.mozilla.org/show_bug.cgi?id=1108469

如果您不介意将一些CSS应用于包含元素，则可以使用:before和:after来覆盖自定义按钮。

div:before, div:after {
    display: block;
    position: absolute;
    width: 14px;
    height: 8px;
    line-height: 8px;
    background-color: #ccc;
    left: 136px;
    z-index: 1;
    font-size: 9px;
    text-align: center;
    pointer-events: none;
}

div:before {
    content: "+";
    top: 11px;
}

div:after {
    content: "-";
    top: 20px;
}

<div><input type="number" /></div>