<input type="number">, in most browsers, will include up/down arrows on the right side of the input to increment/decrement the value. You can also include a step amount to set how much the arrows increment/decrement by: <input type="text" step="3"> would increase the value by 3 when you click the up arrow. The max and min attributes can put bounds on the input value in each direction (and omitting either or both of them leaves no bound in that direction). There is no direct means of creating an arbitrary button to increment/decrement a value. There is some capability to change the style of the up/down arrows in a number input using CSS ( example fiddle ): input[type=number].sheet-my-modified-number-input::-webkit-outer-spin-button, input[type=number].sheet-my-modified-number-input::-webkit-inner-spin-button { /* styles for both outer and inner */ } This trick should only work for WebKit browsers (Safari and Chrome). Firefox can hide the spinners entirely with something like input[type=number].sheet-my-modified-number-input { -moz-appearance: textfield; } , but can't do much other styling (there are other values for -moz-appearance , of course). Opera does not currently support the Shadow DOM, I believe, so you can't do any styling there. I don't believe there's any spin button styling for Internet Explorer, although a cursory internet search implies that IE might respect the WebKit selectors. If the value you wish to change has a finite range, you could implement a cycling button ; the value would only go one direction, but it would reset to the initial value after you reach the last value and try to advance again. This would let you give an arbitrary appearance to your button, if you so chose.
