Grow your CSS skills. Land your dream job.

Last updated on:

Turn Off Number Input Spinners

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-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.


  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…

  2. Carlos
    Permalink to comment#


  3. Theo
    Permalink to comment#

    You can also style the buttons to your liking, by using :before and :after

    Here’s a very simple example and a fiddle (also includes a styled search input)

    input[type=number]::-webkit-inner-spin-button { 
        -webkit-appearance: none;
        color: #333;
    input[type=number]::-webkit-inner-spin-button:after {
        content: "^";
        right: 0;
    input[type=number]::-webkit-inner-spin-button:before {
    input[type=number]::-webkit-inner-spin-button:after {
        -webkit-transform: rotate(180deg);
  4. Permalink to comment#

    Use jQuery to disable the scroll wheel:

    $(':input[type=number]').on('mousewheel', function(e){
    • Rhys

      DON’T blur it, just prevent the event. loosing focus on mousewheel is a bas experience.

      $(':input[type=number]').on('mousewheel', function(e){
    • that is to say, a bad experience

  5. Tom
    Permalink to comment#

    how do the same in reverse order: -webkit-textfield-decoration-container set to read-only but buttons set to enabled ?

  6. Jason
    Permalink to comment#

    How do you disable scrolling (cleanly) with AngularJS or HTML5? I’ve been looking through the docs but I can’t seem to find anything… I was momentarily impressed with the HTML5 spec for number but then I noticed this bug. :(

    • Rocky S


      Did u find any solution to this? How to prevent using angular JS? Let me know if any?


    • Bruno
      Permalink to comment#

      You can write a directive like that:

      mod.directive('inputNumber', function () {
          return {
            restrict: 'A',
            link : function (scope, $element) {
              $element.on('focus', function () {
                angular.element(this).on('mousewheel', function (e) {
              $element.on('blur', function () {
  7. Stephan
    Permalink to comment#

    Is there a solution for firefox 29?

  8. Stephan
    Permalink to comment#

    Okay, here is the solution for firefox 29:

    input[type=number] {
    -moz-appearance: textfield;

  9. John

    Thanks for the FF 29 solution.

  10. Ahhh nice! Thanks for the fix in FF 29 @Stephan! That’s perfect!

  11. mike

    nice indeed stephan. thanks man!

  12. Don

    Is there a way to have number inputs with and without spinners?

    I’m trying to tag certain inputs with a class name.

  13. Pavel

    input[type=number].input-number–noSpinners { -moz-appearance: textfield; }
    input[type=number].input-number–noSpinners::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;

    Add the ‘input-number–noSpinners’ classname to the inputs you want without spinners.

  14. Don


    Thanks that worked!

  15. Not sure it matters at this pint or anything for this particular article, but I just finished up some research on the name used for the spinner widget. Take a look when you get a chance. Other users might find this info helpful if they are researching the best way to implement this functionality…

    Is “Numeric Spinner” the best name for this?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".