frosty
frosty

Reputation: 2659

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

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.

Upvotes: 18

Views: 42948

Answers (3)

Onur Doğan
Onur Doğan

Reputation: 2068

First, need to configure the ::-webkit-inner-spin-button CSS pseudo-element which is used to style the inner part of the spinner button of number picker input elements. On the other hand, the transform: scale() CSS property can be used to increase/decrease the size of the arrows:

.biggerArrows::-webkit-inner-spin-button {
  transform: scale(1.5);
}

.smallerArrows::-webkit-inner-spin-button {
  transform: scale(.5);
}
<input type="number" class="biggerArrows" />
<input type="number" class="smallerArrows" />

Upvotes: 0

Mirdon Cosh
Mirdon Cosh

Reputation: 71

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;">

Upvotes: 7

Aaron Digulla
Aaron Digulla

Reputation: 328724

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.

Upvotes: 6

Related Questions