Hide HTML5 input type number arrow with a css class?

Question

I've seen this question asked before in here Can I hide the HTML5 number input’s spin box?, and some others have asked with a specific request for a Browser, in my case what i want to know is: Is there a way to create a css class like .no-spin to hide the spin arrows across browsers?

I tried:

.no-spin {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

But no luck, I don't really know that much about css in fact...

Answer 1

Answer

.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.no-spin {
    -moz-appearance:textfield !important;
}

<input type="number" class="no-spin"/>

Edit: Placing the "-moz-appearance" declaration inside the ".no-spin::-webkit" selector will not work in Firefox, as of 2020. To get this to work in all browsers, the "-moz-appearance" declaration must be placed in a new class selector, that is just ".no-spin" by itself.

w3schools reference: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

Answer 2

hide arrows of input number

input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      /* display: none; <- Crashes Chrome on hover */
      -webkit-appearance: none;
      margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    }
    input[type="number"] {
      -moz-appearance: textfield; /* Firefox */
    }