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

问题描述 投票：0回答：3

我试图隐藏数字输入上的旋转按钮，但下面的 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;
}
<input type="number">

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

html css firefox input spinner
3个回答
4
投票

对于火狐

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

我在别人的基础上创建了自己的微调器。

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

我的 warper 的 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 为我的 warper

    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 脚本。

0
投票
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
</style>
</head>
<body>

<h2>Hide Input Number Arrows</h2>

<input type="number" value="5">

</body>
</html>

Puedes consultar información en: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.