如何从 Webkit 浏览器的数字输入字段中删除旋转按钮？

防止在基于 Webkit 的浏览器中显示旋转按钮

在 Web 开发中，经常会遇到跨浏览器兼容性问题。当使用 <input type="number"> 时会出现这样的问题。在基于 webkit 的浏览器（例如 Chrome 和 Safari）上。这些浏览器在数字输入字段的右侧显示不需要的旋转按钮。

使用 CSS 禁用旋转按钮

要解决此问题，我们可以利用 CSS 禁用旋转按钮这些浏览器上的旋转按钮。关键是要针对控制旋转按钮的外观和行为的特定 CSS 属性。

以下 CSS 规则通过删除旋转按钮外观并将其边距设置为零来实现此目的：

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

全面的解决方案

最初，上述规则可能会为屏幕上的旋转按钮保留一个小空间右侧。为了解决这个问题，还需要将输入字段的填充清零。因此，完整的 CSS 解决方案变为：

input[type=number] {
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
}

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

通过实施此 CSS 规则，旋转按钮将被有效禁用，从而在不同浏览器之间留下干净且一致的界面。

以上是如何从 Webkit 浏览器的数字输入字段中删除旋转按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！