如何在Firefox上设置输入字段编号向上和向下按钮的样式

Posted 2023-03-06

【中文标题】如何在Firefox上设置输入字段编号向上和向下按钮的样式

【英文标题】：How to style input field number up & down button on firefox

【发布时间】：2015-08-28 08:53:17

【问题描述】：

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

我不能用 JS 来做这个。

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

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 上的外观以及它应该看起来如何

它在 FF 38 中的样子

【问题讨论】：

能否请您使用 jsfiddle 发送代码...请

那些供应商前缀可能与它有关。你看过 css-tricks.com/snippets/css/turn-off-number-input-spinners 上的 cmets 中的演示吗？

tbh 你最好的选择是自己制作。浏览器支持在最好的时候可能是狡猾的，所以我建议制作一个自定义的

【参考方案1】：

您不能直接将 css 应用到 FF 上的按钮，有一个关于它的错误报告： 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>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

错误报告实际上并没有说太多：只是它目前不起作用。

该评论仅表示您的答案已被标记为删除。如果另一位审阅者同意并且您没有更改答案，那么将删除“答案”

那些“自定义按钮”虽然不起作用。

真；它们不起作用，因此是“指针事件：无”。这样，“点击”会“穿过”样式元素，以实际“点击”功能按钮......