html - 数字输入 - 始终显示微调按钮

Question

在 Google Chrome 中，input[type=number] 旋转按钮仅在悬停时显示。

这是我使用的代码:

<input type="number" value="1" min="1" max="999" />

有没有办法始终显示旋转按钮？

Answer 1

您可以使用 ::-webkit-inner/outer-spin-button 定位旋转按钮，而不仅仅是将 opacity 设置为 1(旋转始终存在，但在默认它们有 opacity: 0).

代码:

<style>  

input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

</style>
<input type="number" value="1" min="1" max="999">

fiddle : http://jsfiddle.net/dk8fj/