Hide default input type 'number' up/down arrows in Chrome

Not a lot of easily found resources out there that explain how to fix this problem:

Chrome adds these arrow-like controls to <input type="number"/>. This would be helpful if all browsers did the same thing or if you could style the buttons easily via CSS… but this isn’t the case. To hide them, just add this to your CSS:

form input[type='number']::-webkit-outer-spin-button,
form input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Safari does not show these arrows by default, though I’m pretty sure iOS devices show some kind of default controls for the number input type, so this should work for that, too.

Posted by Thane on 17/10/11 11:01 AM
in web stuff, howto