15

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:

This is how it currently looks on Chrome.

Matthias Winkelmann
  • 15,870
  • 7
  • 64
  • 76
frosty
  • 2,559
  • 8
  • 37
  • 73
  • possible duplicate of [Making up down arrow of HTML's input number very bigger and cleaner](http://stackoverflow.com/questions/29598247/making-up-down-arrow-of-htmls-input-number-very-bigger-and-cleaner) – TechWisdom Jul 05 '15 at 19:58
  • @TechWisdom That question is asking how to make the whole input box bigger - not just the up and down arrows. My question is asking how to make JUST the up and down arrow keys bigger, so it's a different question. – frosty Jul 05 '15 at 20:04

2 Answers2

8

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:

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.

Community
  • 1
  • 1
Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
7

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;">
Mirdon Cosh
  • 71
  • 1
  • 2