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

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.

You can just change the font size of the input 'number' element. This will increase the size of the arrow buttons too. Maybe not exactly what you're looking for, but anyway =

<input type="number" value="1" min="1" max="8" style="font-size: 55px;">