自定义HTML数字输入中上/下箭头的外观 [英] Customize appearance of up/down arrows in HTML number inputs
本文介绍了自定义HTML数字输入中上/下箭头的外观的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有兴趣坚持使用一些基本的HTML元素,以使用户可以增加数字输入字段中的值.
I'm interested in sticking with some basic HTML elements to let users increment the value in a number input field.
我知道可以通过Javascript/JQuery的重新布线来实现,但是可以在没有JS的情况下与这些箭头进行交互吗?
I know this is possible through Javascript/JQuery rewiring, but is it possible to interact with these arrows without JS?
谢谢!
推荐答案
是的,您可以(仅我认为是Webkit):
Yes, you can (webkit only I assume):
<style>
input[type=number] {
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0 8px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]:hover::-webkit-inner-spin-button {
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
</style>
<input type="number" value="0">
这篇关于自定义HTML数字输入中上/下箭头的外观的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文