Can I hide the HTML5 number input’s spin box?

Question

Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or JavaScript method to prevent the up/down arrows from appearing.

<input id="test" type="number">

Can you post an example of the code you're using? A screenshot would be great as well so we know what you're looking at. I'm looking at `` in Chrome and seeing a typical input field with up and down arrows on the side. — calvinf, Sep 24 '10 at 21:09
You are seeing exactly what I am seeing. I am trying to keep the type=number markup to ensure that mobile browsers bring up an appropriate keyboard, and prevent the up and down arrows from appearing in computer browsers. — Alan, Sep 27 '10 at 11:47
If you're using number inputs, be sure to use something that plays nice with modern iOS, Android, and Desktop browsers: ``. More info: http://stackoverflow.com/a/31619311/806956 — Aaron Gray, Jul 24 '15 at 20:40
What I suggest doing is writing markup along the lines of ` ` and using [jQuery Validati](https://www.jqueryscript.net/form/Flexible-HTML5-Form-Field-Validation-Plugin-With-jQuery-Validati.html) or similar to handle validation. I haven't tested this approach, which is why this is a comment, rather than an answer. — Agi Hammerthief, Sep 14 '18 at 16:11

score 1351 · Accepted Answer · edited Feb 11 '19 at 11:33

1351

This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):

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

<input type="number" step="0.01" />

You can always use the inspector (webkit, possibly Firebug for Firefox) to look for matched CSS properties for the elements you are interested in, look for Pseudo elements. This image shows results for an input element type="number":

Inspector for input type=number (Chrome)

edited Feb 11 '19 at 11:33

Mikael Dúi Bolinder

2,219
2
17
40

answered Nov 28 '10 at 18:17

antonj

20,208
6
29
20

37

It seems that Chrome no longer has a problem, so you can just use `display: none;` as the only thing inside the selector – philfreo Sep 11 '12 at 18:19
11

This is unfortunately not cross-browser so I'd advise against using `type=number` if you have to hide these arrows. E.g. currently they'd be still displayed in Opera and they'll start being displayed in Firefox, IE etc. when they implement this input type. – mgol Feb 05 '13 at 14:44
1

Just use ` It has [wide support now](https://caniuse.com/?search=inputmode) – Shivam Jha Aug 12 '21 at 17:48
1

I would not call that "wide support"... – RoboticRenaissance Sep 27 '21 at 20:56
for some reason I can type in the letter 'e' in Chrome 94 – Johansrk Sep 28 '21 at 11:02
1

@Johansrk because letter 'e' can be a part of a valid number, i.e. 1e3 === 1000. – Eugene Karataev Sep 30 '21 at 06:25

score 473 · Answer 2 · edited Mar 27 '18 at 10:12

473

Firefox 29 currently adds support for number elements, so here's a snippet for hiding the spinners in webkit and moz based browsers:

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<input id="test" type="number">

edited Mar 27 '18 at 10:12

answered Mar 21 '14 at 12:45

swehren

5,524
1
16
11

score 408 · Answer 3 · edited Jun 20 '20 at 09:12

Short answer:

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

<input type="number" />

Longer answer:

To add to existing answer...

Firefox:

In current versions of Firefox, the (user agent) default value of the -moz-appearance property on these elements is number-input. Changing that to the value textfield effectively removes the spinner.

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

In some cases, you may want the spinner to be hidden initially, and then appear on hover/focus. (This is currently the default behavior in Chrome). If so, you can use the following:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

Chrome:

In current versions of Chrome, the (user agent) default value of the -webkit-appearance property on these elements is already textfield. In order to remove the spinner, the -webkit-appearance property's value needs to be changed to none on the ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo classes (it is -webkit-appearance: inner-spin-button by default).

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

<input type="number" />

It's worth pointing out that margin: 0 is used to remove the margin in older versions of Chrome.

Currently, as of writing this, here is the default user agent styling on the 'inner-spin-button' pseudo class:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

i like this answer better because it includes relevant firefox info, which, when developing something, needs to be considered. webkit-only answers that ignore other browser engines leave much to be desired — RozzA, Aug 04 '16 at 21:13

score 135 · Answer 4 · edited Aug 15 '13 at 22:22

135

According to Apple’s user experience coding guide for mobile Safari, you can use the following to display a numeric keyboard in the iPhone browser:

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

A pattern of \d* will also work.

edited Aug 15 '13 at 22:22

Rory O'Kane

27,337
11
91
127

answered Feb 03 '11 at 03:43

team_steve

1,607
1
10
3

21

This currently does nothing on Android, in all browsers. Tested on [this test page](http://jsfiddle.net/roryokane/T2VRE/show/) in Browser 4.2.2, Chrome 28, and Firefox 23 on Android 4.2. Those browsers just show the standard text keyboard with this markup. – Rory O'Kane Aug 15 '13 at 16:21

score 66 · Answer 5 · answered Jun 03 '20 at 18:13

66

I found a super simple solution using

<input type="text" inputmode="numeric" />

This is supported is most browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

answered Jun 03 '20 at 18:13

youjin

1,721
1
10
25

9

https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ explains why UK gov switched from type="number" to this solution. – Luke Sep 05 '20 at 22:42
9

Can still type any character if you have a physical keyboard – vsync Sep 21 '21 at 19:46
1

@vsync The OP and youjin never mentioned that it won't be possible. There lot of another posts handling this - for example https://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery – Peter VARGA Dec 08 '21 at 09:41

MERT DOĞAN · Answer 6 · 2018-06-06T09:36:42.020

44

Try using input type="tel" instead. It pops up a keyboard with numbers, and it doesn’t show spin boxes. It requires no JavaScript or CSS or plugins or anything else.

edited Jun 06 '18 at 09:36

answered Mar 07 '13 at 22:52

MERT DOĞAN

2,470
23
25

22

This solution does not currently do any validation in any browsers like `type=number` does. – Pepijn Jun 18 '13 at 10:23
7

[The telephone keyboard](http://i.stack.imgur.com/aiLAa.png) is not as good as [the number keyboard](http://i.stack.imgur.com/gZRfo.png), though it’s far better than [the text keyboard](http://i.stack.imgur.com/2m6Yr.png). The telephone keyboard has irrelevant letters and symbols that are omitted from the number keyboard. (Tested with [this page](http://jsfiddle.net/roryokane/T2VRE/show/) on Android 4.2.) – Rory O'Kane Aug 15 '13 at 16:38
17

there is no "." in the tel keyboard :- – gion_13 Sep 03 '13 at 12:59
7

This is not a solution, and by the HTML5 standards its stupid. input[tel] is for phone numbers, input[number] is for generic numbers, including floating point ones. So this is not a solution at all. – Vasil Popov Apr 27 '15 at 12:32

score 20 · Answer 7 · answered Aug 08 '18 at 09:51

Only add this css to remove spinner on input of number

/* For Firefox */

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



/* Webkit browsers like Safari and Chrome */

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

score 12 · Answer 8 · answered Mar 23 '21 at 07:48

12

Usability Issues

The <input type=number> was found to be problematic during a usability study performed by the GOV.UK team. This team maintains one of the world's best known design systems and concludes that this input type:

cannot be dictated or selected when using Dragon Naturally Speaking

appears as unlabeled in NVDA's element list

appears as a spin button in NVDA's object navigation, which has an edit field and two buttons inside - those buttons are unlabeled, but decrease/increase the value

is reported as unlabeled edit field when using nvda+tab

Alternative solution

Instead, they recommend to use <input type="text" inputmode="numeric" pattern="[0-9]*"> which comes down to the combined answers of @team_steve and @youjin. This not only hides the spin boxes, it also improves the overall usability of the element.

answered Mar 23 '21 at 07:48

Pepijn Gieles

541
12
20

2

Can still type in non-numeric characters - which is undesired. The usability thing is not always important, as the limitation effect of allowing to input only numbers, which is a huge plus – vsync Sep 21 '21 at 19:49
You can put in non-numeric characters but not submit the form. I'd argue that's a plus because this way you can detect errors and give a proper validation message. If someone mistypes but only can put in numbers, the values might be right according to the rules but not from a user point of view. For example if someone types in `1K`, they mean `1000`. But if the `K` can't be typed in, you cannot detect this mistake. The input will be `1`, which is not what was meant. – Pepijn Gieles Dec 05 '21 at 15:26
Ture, but consider `form` ancestor element is not a must, and it's more common for "form" components not to be wrapped with a `
` element in web-apps which are not meant to act as web page due to the nature of such systems.
– vsync Dec 05 '21 at 16:09

score 11 · Answer 9 · answered Dec 30 '15 at 11:30

I've encountered this problem with a input[type="datetime-local"], which is similar to this problem.

And I've found a way to overcome this kind of problems.

First, you must turn on chrome's shadow-root feature by "DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM"

Then you can see all shadowed DOM elements, for example, for <input type="number">, the full element with shadowed DOM is:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

And according to these info, you can draft some CSS to hide unwanted elements, just as @Josh said.

score 4 · Answer 10 · edited Jun 24 '21 at 07:18

To make this work in Safari I found adding !important to the webkit adjustment forces the spin button to be hidden.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

I am still having trouble working out a solution for Opera as well.

score 4 · Answer 11 · answered Oct 08 '10 at 11:10

Not what you asked for, but I do this because of a focus bug in WebKit with spinboxes:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

It might give you an idea to help with what you need.

score 4 · Answer 12 · answered Sep 22 '17 at 09:20

This is more better answer i would like to suggest on mouse over and without mouse over

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

Sabbir Hossen Chowdhury · Answer 13 · 2020-03-30T21:10:49.427

4

In WebKit and Blink-based browsers & All Kind Of Browser use the following CSS :

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

edited Mar 30 '20 at 21:10

answered Mar 30 '20 at 03:07

Sabbir Hossen Chowdhury

49
2

others wrote the **same** thing years before, so why did you choose to add this still? – vsync Sep 21 '21 at 19:49

score 4 · Answer 14 · answered Aug 07 '21 at 07:15

4

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Source

answered Aug 07 '21 at 07:15

francis

2,165
20
23

score 3 · Answer 15 · answered Sep 26 '16 at 12:44

Maybe change the number input with javascript to text input when you don't want a spinner;

document.getElementById('myinput').type = 'text';

and stop the user entering text;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

then have the javascript change it back in case you do want a spinner;

document.getElementById('myinput').type = 'number';

it worked well for my purposes

score 3 · Answer 16 · answered Nov 18 '16 at 21:16

On Firefox for Ubuntu, just using

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

did the trick for me.

Adding

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Would lead me to

Unknown pseudo-class or pseudo-element ‘-webkit-outer-spin-button’. Ruleset ignored due to bad selector.

everytime I tried. Same for the inner spin button.

score 2 · Answer 17 · answered Dec 31 '19 at 07:32

I needed this to work

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

The extra line of appearance: none was key to me.

score 1 · Answer 18 · edited Mar 27 '18 at 10:11

1

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

<input id="test" type="number">

edited Mar 27 '18 at 10:11

answered Feb 17 '17 at 08:41

Prince Sharma

69
1
5

score 1 · Answer 19 · answered Apr 12 '21 at 15:03

For me on chrome nothing has worked but display: none.

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Credits to @philfreo for pointing it out in the comments.

score 0 · Answer 20 · answered Nov 03 '20 at 05:49

0

This like your css code:

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

answered Nov 03 '20 at 05:49

kozimjon yoqubov

11