Customizing Increment Arrows on Input of Type Number Using CSS
I have an input of type number that is rendered using the following code: <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number"> It looks like this: I would like to turn it into something like this: The second view is emulated using two separate buttons. How could I style the arrows as described? The native input[type=number] controls are not style-able cross-browser. The easiest and safest way to achieve what you want cross-browser/cross-device is to hide them using: input[type="number"] { -webkit-appearance: textfield; -moz-appearance: