treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Turn Off Number Input Spinners

Last updated on:

WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this:

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

Note that some other functionality still exists, like being able to increment the number via the scroll wheel on a mouse.

Screen Shot 2012-10-11 at 5.09.17 PM

Top, on, Bottom, off.
View Comments

Comments

  1. Anyone have any idea of how to add styles to the spin buttons besides turning them off? I have a taller-than-default text box and I’d like to make the spinners a little bigger and easier to click…

Leave a Comment

Use markdown or basic HTML and be nice.