自定义 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屋!
查看全文