如何使用 CSS 禁用数字输入字段上的箭头按钮？

禁用输入类型=“数字”属性上的箭头按钮的 CSS 技巧

用户经常在桌面浏览器中的数字输入字段上遇到箭头按钮比如 Chrome 和 Safari。然而，这些按钮可能会破坏某些设计美学。我们可以使用 CSS 禁用它们吗？

CSS 解决方案：

要禁用旋转按钮，我们可以使用针对输入字段各个部分的 CSS 规则：

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

::-webkit-inner-spin-button 的目标是内部箭头按钮，而::-webkit-outer-spin-button 目标为外部箭头按钮。通过将 -webkit-appearance 设置为 none，我们隐藏了按钮。此外，将边距设置为 0 可确保删除按钮后不会留下多余的空间。

额外的改进：

用户报告，即使隐藏按钮后，输入字段的右侧保留了一个小空间。为了解决这个问题，我们需要瞄准旋转器本身的边距：

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

通过应用此规则，我们可以完全消除不需要的空间，从而为数字输入字段提供更干净、更精简的设计。

以上是如何使用 CSS 禁用数字输入字段上的箭头按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！