数字输入 - 始终显示旋转按钮 [英] number input - always show spin buttons

问题描述

在谷歌浏览器中， input [type = number] 旋转按钮仅显示在悬停上。 img src =https://i.stack.imgur.com/eYk19.pngalt =镀铬旋钮>

这是我使用的代码：

$ b

< input type =numbervalue =1min = 1max =999/>

任何方式总是显示旋转按钮？

解决方案

您可以使用内部/外部旋转按钮，而不仅仅是将 opacity 设置为1（旋转始终存在，但默认情况下它们具有 opacity：0 ）。

代码：

 <风格> 
 
 input [type = number] ::  -  webkit-inner-spin-button {
 opacity：1 
} 
 
< / style> 
< input type =numbervalue =1min =1max =999> 
  

小提琴：
http://jsfiddle.net/dk8fj/

In Google Chrome, input[type=number] spin buttons are shown only on hover.

This is the code I use:

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

Is there any way to always show spin buttons?

解决方案

You can target spin buttons using ::-webkit-inner/outer-spin-button and than just set opacity to 1 (spins are always there, but in default they have opacity: 0).

Code:

<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/

这篇关于数字输入 - 始终显示旋转按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！