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

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

当前回答

Firefox 29目前增加了对数字元素的支持,所以这里有一个代码片段,用于隐藏webkit和基于moz的浏览器中的旋转器:

输入(type =“数量”){ -moz-appearance:文本框; } 输入::-webkit-outer-spin-button, 输入:-webkit-inner-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";
}

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

在WebKit和基于blink的浏览器和所有类型的浏览器中使用以下CSS:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

简短的回答:

输入(type = "数量"]::-webkit-outer-spin-button, 输入(type = "数量"]::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; } 输入(type = "数量"]{ -moz-appearance:文本框; } <input type="number" />

再答:

为了补充现有的答案……

Firefox:

在当前版本的Firefox中,(用户代理)这些元素上的-moz-appearance属性的默认值是number-input。将其更改为value文本字段有效地删除了旋转器。

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

在某些情况下,你可能希望旋转器一开始是隐藏的,然后出现在悬停/聚焦上。(这是目前Chrome的默认行为)。如果是,你可以使用以下方法:

输入(type = "数量"]{ -moz-appearance:文本框; } 输入(type = "数量"]:徘徊, 输入(type = "数量"]:专注{ -moz-appearance:输入数字; } < input type = "数量" / >


铬:

在当前版本的Chrome中,(用户代理)这些元素上的-webkit-appearance属性的默认值已经是textfield。为了删除旋转器,需要在::-webkit-outer-spin-button/::-webkit-inner-spin-button伪类中将-webkit-appearance属性的值更改为none(默认为-webkit-appearance: inner-spin-button)。

输入(type = "数量"]::-webkit-outer-spin-button, 输入(type = "数量"]::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; } <input type="number" />

值得指出的是,在旧版本的Chrome中,margin: 0是用来删除边缘的。

目前,在写这篇文章时,这里是'inner-spin-button'伪类的默认用户代理样式:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}
/* 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;
}

这是更好的答案,我想建议鼠标在上面和没有鼠标在上面

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