Making up down arrow of HTML's input number much bigger and cleaner
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>well, to achieve that you have to play with pseudo elements and some CSS3 tricks.
to create triangle https://css-tricks.com/snippets/css/css-triangle/
to manipulate input number spinners
input[type=number]::-webkit-inner-spin-button {
/* your code*/
}
here is the example.
input {
color: #777;
width: 2em;
font-size: 2em;
border-radius: 10px;
border: 2px solid #ccc;
padding: 5px;
padding-left: 10px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor: pointer;
display: block;
width: 10px;
text-align: center;
position: relative;
background: transparent;
}
input[type=number]::-webkit-inner-spin-button::before,
input[type=number]::-webkit-inner-spin-button::after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid #777;
}
input[type=number]::-webkit-inner-spin-button::before {
top: 7px;
}
input[type=number]::-webkit-inner-spin-button::after {
bottom: 7px;
transform: rotate(180deg);
}<input type="number" value="1">