本文介绍了使HTML输入数字的向下箭头更大,更干净的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
而不是可以吗?为了始终显示输入数字"的上/下箭头?,我希望能够使上/下箭头更大,更干净.
Rather than Is it possible to always show up/down arrows for input "number"?, I want to be able to make up/down arrow much bigger and cleaner.
我现在拥有的是:
我需要像这样使它们变大:
I need to make them bigger like this:
推荐答案
您可以在其中包装输入并设置元素和样式
you can wrap a input in and element and style it
div {
display: inline-block;
position: Relative;
border: 2px solid grey;
border-radius: 10px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div:before,
div:after {
background: white;
right: 0px;
width: 30px;
height: 20%;
position: absolute;
pointer-events: none;
}
div:before {
content: '';
bottom: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
background-position: center;
}
div:after {
content: '';
top: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
transform: rotate(180deg);
background-position: center;
}
input {
height: 80PX;
font-size: 50px;
outline: 0;
border: 0;
}
<div>
<input type="number" value="10" />
</div>
这篇关于使HTML输入数字的向下箭头更大,更干净的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!