跨浏览器是否存在一种一致的方式来隐藏某些浏览器(例如 Chrome)为数字类型的 HTML 输入呈现的新旋转框?我正在寻找一种 CSS 或 JavaScript 方法来防止出现向上 / 向下箭头。
<input id="test" type="number">
该 CSS 有效地隐藏了 Webkit 浏览器的旋转按钮(已在 Chrome 7.0.517.44 和 Safari 版本 5.0.2(6533.18.5)中进行了测试):
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />
您始终可以使用检查器(Webkit,可能是 Firefox 的 Firebug)来查找与您感兴趣的元素匹配的 CSS 属性,并查找 Pseudo 元素。此图显示了输入元素 type =“number” 的结果:
Firefox 29 当前增加了对数字元素的支持,因此以下是在基于 Webkit 和 Moz 的浏览器中隐藏微调框的代码段:
input[type='number'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<input id="test" type="number">
input[type="number"] {
-moz-appearance: textfield;
}
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;
}
<input type="text" pattern="[0-9]*" />
尝试改用input type="tel"
。它弹出带有数字的键盘,并且不显示旋转框。它不需要 JavaScript 或 CSS 或插件或其他任何东西。
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
我遇到了与input[type="datetime-local"]
类似的问题。
而且我找到了一种克服此类问题的方法。
首先,您必须通过 “DevTools-> 设置 -> 常规 -> 元素 -> 显示用户代理阴影 DOM” 打开 chrome 的 shadow-root 功能。
然后,您可以看到所有阴影 DOM 元素 ,例如,对于<input type="number">
,带有阴影 DOM 的完整元素为:
<input type="number">
<div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
<div id="editing-view-port">
<div id="inner-editor"></div>
</div>
<div pseudo="-webkit-inner-spin-button" id="spin"></div>
</div>
</input>
根据这些信息,您可以起草一些 CSS 来隐藏不需要的元素,就像 @Josh 所说的那样。
// 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=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
<input id="test" type="number">
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; }