在 HTML5 中显示输入类型编号的微调器

Question

我正在使用 HTML5，我正在使用数字控件 ( input type="number")。默认情况下，我需要微调器（向上和向下箭头）在控件中可见，现在悬停时它是可见的。

我可以通过 CSS 实现它吗？或者还有其他方法吗？

Answer 1

您可以使用伪类-webkit-inner-spin-button和-webkit-outer-spin-button. 请注意，此技巧仅适用于基于 Webkit 的浏览器，例如 Chrome。

例子：

/* Always */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    opacity: 1;
}

由于您想在触发悬停事件时显示，上一个示例将是：

/* On hover */
input[type=number]:hover::-webkit-inner-spin-button, 
input[type=number]:hover::-webkit-outer-spin-button { 
    opacity: 1;
}

检查此代码段以查看工作示例。

如果您想将您的功能扩展到其他浏览器，您将需要创建一个小部件。最快的方法是使用jQuery UI Spinner 小部件。