206

I have a site which is primarily for mobile users but desktop too.

On Mobile Safari, using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.

In Chrome and Safari however, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6-digit number anyway.

Is it possible to disable this with -webkit-appearance or some other CSS trick? I have tried without much luck.

pojo
  • 5,892
  • 9
  • 35
  • 47
  • 15
    If you prefer to use `type="text"` for other reasons and only switched to number for the numerical keyboard feature, you can use `pattern="[0-9]*"` to get the keyboard feature, allowing you to retain `type="text"`. See http://stackoverflow.com/questions/6171903/ipad-html5-default-keyboard-to-symbol-view – joshuahedlund May 02 '12 at 15:54

6 Answers6

287

I discovered that there is a second portion of the answer to this.

The first portion helped me, but I still had a space to the right of my type=number input. I had zeroed out the margin on the input, but apparently I had to zero out the margin on the spinner as well.

This fixed it:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Community
  • 1
  • 1
Bob Spryn
  • 17,742
  • 12
  • 68
  • 91
  • Awesome. I had a [similar issue](http://stackoverflow.com/questions/6827272/display-flaw-with-html-input-type-number-on-iphone-ios-safari), but with a slightly different CSS strategy, which lead to entirely new problems... – Lukas Eder Aug 22 '11 at 14:26
  • 1
    Does anyone know of a way to fix the scroll behaviour where you can scroll up and down infinitely? I've set `min=0.01` (and `max` to some arbitrary value) in my input element, but I'd prefer to have the scrollwheel just go up and down the page. I'm using AngularJS and I can't find anything atm. – JaKXz Mar 29 '14 at 19:30
  • 2
    Linking back to an authoritative source for this specific problem and this kind of information: http://css-tricks.com/snippets/css/turn-off-number-input-spinners/ – vhs Jan 13 '15 at 21:22
  • 1
    to be clear, this does not remove the mouse scroll functionality! – babalu Feb 24 '15 at 17:00
  • You can use `display:none;`. Also there is no need to specify `margin:0` at all, developers should check stuff from time to time themselves! –  Dec 09 '15 at 17:41
  • 1
    -moz-appearance: textfield for Firefox – Kevin Suttle Jul 11 '16 at 16:53
118

The below css works for both Chrome and Firefox

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;
}
Rolwin Crasta
  • 4,219
  • 3
  • 35
  • 45
17

Not sure if this is the best way to do it, but this makes the spinners disappear on Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
robertc
  • 74,533
  • 18
  • 193
  • 177
  • @JethroLarson What's it not working on? You could try `-webkit-outer-spin-button` instead. – robertc Nov 20 '10 at 02:35
  • this worked great for type="date" : input[type=date]::-webkit-outer-spin-button { -webkit-appearance: none; } – gxc Jan 20 '11 at 05:42
11

It seems impossible to prevent spinners from appearing in Opera. As a temporary workaround, you can make room for the spinners. As far as I can tell, the following CSS adds just enough padding, only in Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
Goulven
  • 777
  • 9
  • 20
  • 4
    @Knu Indeed, but it's worth mentioning here because the code in the answer leaves the inputs unusable with Opera. – Goulven May 24 '11 at 12:00
  • 4
    @Goulvench please don't :) I've found it very useful, someone else might, too. – frnhr Mar 31 '13 at 19:01
0

Another solution to avoid the browser default spinner for the number type by changing

  1. type into text

  2. inputmode into numeric and

  3. number only pattern "[0-9]*"

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

Unlike 'number' type, the above solution still allows the user to enter non-number characters in the input box but you can avoid invalid submission by listening to the oninvalid event.

SridharKritha
  • 8,481
  • 2
  • 52
  • 43
-2

You can also hide spinner with following trick :

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}
Sébastien Varinois
  • 107
  • 9