Hide HTML5 input type number arrow with a css class?

11
votes

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

3
csshtmlinput
No CSS required. now a days you can use <input inputmode="numeric" .. reference : youtu.be/alGcULGtiv8?t=630 – Suresh Kumar

3 Answers

28
votes

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

3
votes

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;
}
0
votes

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