Reputation: 2659
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:
Upvotes: 18
Views: 42948
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
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
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