首页 文章

在输入类型=“数字”上禁用webkit的旋转按钮？

提问于
浏览 次
198

我有一个主要面向移动用户的网站，但桌面也是如此 .

在Mobile Safari上，使用 <input type="number"> 可以很好地工作，因为它会在输入字段上显示数字键盘，该键盘应该只包含数字 .

但是在Chrome和Safari中，使用数字输入会在字段的右侧显示旋转按钮，这在我的设计中看起来像垃圾 . 我真的不需要按钮，因为当你需要写一个像6位数字的东西时它们是无用的 .

是否可以使用 -webkit-appearance 或其他一些CSS技巧禁用此功能？我试过没有太多运气 .

css html5 webkit

5 回答

  • 281

    以下css适用于Chrome和Firefox

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

input[type=number] {
    -moz-appearance:textfield;
}
    回复于
  • 100

    我发现答案中有第二部分 .

    The first portion对我有所帮助，但我的 type=number 输入右边仍有一个空格 . 我已经将输入上的边距归零，但显然我不得不将旋转器上的边距归零 .

    这解决了它：

    input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
    回复于
  • -1

    不确定这是否是最好的方法，但这会让旋转器在Chrome 8.0.552.5 dev上消失：

    input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
    回复于
  • 10

    似乎不可能阻止微调器出现在Opera中 . 作为临时解决方案，您可以为纺纱厂腾出空间 . 据我所知，以下CSS只添加了足够的填充，仅在Opera中：

    noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
    回复于
  • 15

    您还可以使用以下技巧隐藏微调器：

    input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}
    回复于

相关问题