How to change the size of the spin-buttons from an input field of type 'number' in webkit browser?

Question

I need to change the size of the spin-buttons from an input field of type 'number' in a webkit browser. Does anybody know how to achieve this? In my special case I use jquery mobile. maybe this helps... thnx!

edit: I think I need to specify my question in that direction that I use jquery mobile on non-mobile browsers (for a kiosk system with touch monitor).

Answer 1

You need to use -webkit-appearance: none; to allow for overriding in mobile browsers.

See this answer: https://stackoverflow.com/a/4812443/737794

Native form elements can be annoying when trying to style cross-browser, so loads of plugins exist that replace the native elements (like spin buttons) with styleable HTML elements. Here's a lightweight plugin that replaces only the spin button elements ->

http://www.egrappler.com/contents/smartspin/demo/spinner.htm

EDIT:

As headkit mentioned, this replaces 'text' inputs, not data-type="spinbox".

Here's the plugin he mentions to replace the spinbox type ->

http://dev.jtsage.com/jQM-Spinbox/#