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

No CSS required. now a days you can use – Suresh Kumar Aug 31 '20 at 15:08 — Suresh Kumar, Aug 31 '20 at 15:08

score 43 · Accepted Answer · edited Jun 20 '20 at 09:12

43

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 17 '15 at 05:51

Abs

3,902
1
31
30

1

Is this solution supported in most browsers and devices? – Jonathan Solorzano Nov 17 '15 at 06:00
1

it should work based on the !important for safari and the rest for chrome and firefox happy for community to suggest any improvements I might have missed.. – Abs Nov 17 '15 at 06:03
This worked for me in Chrome, **however**, beware that the up and down arrow keys will still cause the number to be incremented or decremented. – Aaron Cicali Jan 27 '17 at 04:40
1

-moz-appearance:textfield !important; needs to apply to the input itself, not the spin-buttons. Changing that will make it work in FF. – theMaestro73 Jan 09 '18 at 21:33

score 4 · Answer 2 · answered Nov 17 '15 at 05:48

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

score 1 · Answer 3 · edited Jun 16 '21 at 10:04

1

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

edited Jun 16 '21 at 10:04

Pradeep

9,667
13
27
34

answered Jun 15 '21 at 23:07

ASC User

31
2

score 0 · Answer 4 · answered Oct 13 '22 at 08:25

0

It works fine in all browsers:

HTML

<input type="number" />

CSS

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

answered Oct 13 '22 at 08:25

a.ak

659
2
12
26

Hide HTML5 input type number arrow with a css class?

4 Answers4

Answer