::-webkit-inner-spin-button 在 Firefox 上显示答案

【问题标题】：::-webkit-inner-spin-button shows on Firefox::-webkit-inner-spin-button 在 Firefox 上显示
【发布时间】：2016-12-18 21:44:37
【问题描述】：

我试图隐藏数字输入上的旋转按钮，但下面的 CSS 在 Firefox 47 和 48 上不再起作用。有解决方案吗？

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

&lt;input type="number"&gt;

这是仍在我的 Firefox 48 浏览器中显示的微调器：

【问题讨论】：

我解决了创建自己的微调器的问题。

标签： html css firefox input spinner

【解决方案1】：

火狐

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

【讨论】：

【解决方案2】：

我根据其他人创建自己的微调器。

CSS

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

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

我的变形器的 CSS

    .spinnerwarpper {
        display: flex;
    }

    .spinnerwarpper input {
        width: calc(100% - 4em);
    }

    .spinnerwarpper i {
        padding: 0;
        padding-left: 0.1em;
        padding-top: 0.2em;
        white-space: nowrap;
        vertical-align: text-bottom;
        cursor: pointer;
        cursor: hand;
        color: #737373;
    }

我的整经机的 JS

    function fjrSpinner(id) {
        org_html = document.getElementById(id).outerHTML;   
        new_html = "<section class='spinnerwarpper'>" + org_html;
        new_html = new_html + "<i class='fa fa-arrow-down fa-2x align-center numberdown"+id+" special' aria-hidden='true'></i>"
        new_html = new_html + "<i class='fa fa-arrow-up fa-2x align-center numberup" + id + "  special' aria-hidden='true'></i>"
        new_html = new_html + "</section>";
        document.getElementById(id).outerHTML = new_html;

        $('.numberup'+id).click(function (i, oldval) {
            var x = $(this).siblings('input')[0];
            var thisvalue = parseInt(x.value);
            var thismax = parseInt(x.max);
            if (!isNaN(thismax)){           
                if (thismax > thisvalue) {
                    thisvalue++;
                    x.value = thisvalue;
                } else {
                    x.value = thismax;
                }
            } else {
                thisvalue++;
                x.value = thisvalue;
            }
            //para ativar efeito do blur para  poder colocar um evento
            $('#' + id).trigger("blur");
        });
        $('.numberdown'+id).click(function (i, oldval) {
            var x = $(this).siblings('input')[0];
            var thisvalue = parseInt(x.value);
            var thismin = parseInt(x.min);
            if (!isNaN(thismin)) {
                if (thismin < thisvalue) {
                    thisvalue--;
                    x.value = thisvalue;
                } else {
                    x.value = thismin;
                }
            } else {
                thisvalue--;
                x.value = thisvalue;
            }
            //para ativar efeito do blur para  poder colocar um evento
            $('#'+id).trigger("blur");
        });

        org_html = document.getElementById(id);
        inputTypeNumberPolyfill.polyfillElement(org_html);
    };

还有 Polyfill 脚本。

【讨论】：