Increase the size of the down and up arrow on the number input, CSS, HTML

Question

Is there a way to increase the size of the up and down arrow on the right of the number input box by using CSS? Just the up and down arrows, not the whole input box, 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:

Answer 1

There is no official way to style number input elements; you will have to come with a hack. These answers shows a few ways to do it:

• Styling a input type=number
• Making up down arrow of HTML's input number very bigger and cleaner

The main problem is where to put the bigger arrows. You don't want to change the size of the input which means the arrows can only grow wider (or they wouldn't fit into the input anymore). You will have to think of a way to solve this.

Possible solutions: Show the arrows after the input element, hide them unless you hover over the element, use cursor keys to increase/decrease the number, so you don't need a mouse at all.