Hide HTML5 input type number arrow with a css class?

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

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 */
    }

You can try just in your html

<input type="text" pattern="[0-9]">

or if you really want to keep it as number, although as security doesn't change anything maybe try in your css this:

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