Computing desk
< June 29	<< May \| June \| Jul >>	July 1 >

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is an archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

June 30

HTML input element array

When an HTML input element is set to the number type, there are these little up/down arrows that you can click to change its value[1]. How do I make those arrows bigger? I tried using CSS to set the height the input box to very large, but the arrow stayed the same size [2](which is to say, freaking tiny). Scala Cats (talk) 15:33, 30 June 2017 (UTC)[reply]

The little arrows aren't standard (yet). So, every browser implements them in a different way. This article is a couple years old, but it is almost entirely up to date. You can see that there are many tricks required to simply get the numeric input boxes to look remotely similar from browser to browser. 209.149.113.5 (talk) 15:49, 30 June 2017 (UTC)[reply]

Thanks. I don't actually need the box to appear consistent from browser to browser; I'm fine with whatever the browser makers choose to go with. I don't even need the up/down arrows to show on every browser. If they don't show up, it's fine. I just want to make sure that when they do show up, they don't up so damn tiny. My preference is: big arrow > no arrow >= tiny-ass arrows. Currently I'm getting tiny-ass arrows on every browser. Scala Cats (talk) 17:47, 30 June 2017 (UTC)[reply]

If it helps, the buttons are actually called spinners. WebKit gives limited access to them in CSS with "input[type=number]::-webkit-outer-spin-button" and "input[type=number]::-webkit-inner-spin-button". It is possible that your browser will let you change the size, border, color, etc... I can't test it at the moment because I'm on a public computer in the break room - no ability to create a test web page and open it. 209.149.113.5 (talk) 18:25, 30 June 2017 (UTC)[reply]