Increase the size of down arrow and arrow on number input, CSS, HTML
Is there a way to increase the size of the up and down arrows to the right of the number input box using CSS? Just up and down arrows, not all input fields, or at least proportionally. See this example:
.size-36 {
font-size: 36px;
}
.size-12 {
font-size: 12px;
}
<input type="number" class="size-36" value="2" min="0" max="10" step="1">
<input type="number" class="size-12" value="2" min="0" max="10" step="1">
<input type="number" value="2" min="0" max="10">
Current result:
source to share
There is no official way to style the number of input
elements; you will have to go with the hack. These answers show several ways to do it:
The main problem is to place big arrows You don't want to resize the input, which means the arrows can only expand (or they won't fit into the input anymore). You will have to think about how to solve this.
Possible solutions: show the arrows after the input element, hide them if you don't hover over the element, use the arrow keys to increase / decrease the number, so you don't need a mouse at all.
source to share