数字输入 - 始终显示旋转按钮 [英] 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屋!
查看全文