是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法,以防止向上/向下箭头出现。

<input id="test" type="number">

当前回答

在Firefox for Ubuntu上,只是在使用

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

帮我搞定了。

添加

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

会让我

未知伪类或伪元素' -webkit-outer-spin-button '。 由于错误的选择器而忽略规则集。

每次我尝试。内部旋转按钮也是一样。

其他回答

在Firefox for Ubuntu上,只是在使用

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

帮我搞定了。

添加

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

会让我

未知伪类或伪元素' -webkit-outer-spin-button '。 由于错误的选择器而忽略规则集。

每次我尝试。内部旋转按钮也是一样。

我需要这个成功

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

外表的额外线条:对我来说都不是关键。

输入(type =数量)::-webkit-inner-spin-button, 输入(type =数量)::-webkit-outer-spin-button { -webkit-appearance:没有; <input id="test" type="number">

不是你要求的,但我这样做是因为WebKit中的spinboxes的焦点bug:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

它可能会给你一个想法来帮助你。

我找到了一个超级简单的解决方法

<input type="text" inputmode="numeric" />

大多数浏览器都支持:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://caniuse.com/input-inputmode