148

Just looking to remove these arrows, convenient in certain situations.

I would like to preserve the browser's awareness of the content being purely numeric however. So changing it to input[type="text"] is not an acceptable solution.

Now that Opera is webkit based, this question is a dulpicate of: Can I hide the HTML5 number input’s spin box?

Community
  • 1
  • 1
anthonyryan1
  • 4,867
  • 2
  • 34
  • 27

3 Answers3

363

I've been using some simple CSS and it seems to remove them and work fine.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
<input type="number" step="0.01"/>

This tutorial from CSS Tricks explains in detail & also shows how to style them

Mikael Dúi Bolinder
  • 2,080
  • 2
  • 19
  • 44
JayD
  • 6,173
  • 4
  • 20
  • 24
  • 34
    Because not everyone uses a WebKit-based browser: https://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29 – Michael Cordingley Jul 20 '15 at 19:19
  • i want to remove the increment and decrement property when click arows – byteC0de Feb 25 '16 at 13:22
  • 7
    Does not work with firefox (v 45.0). The link from @michael-cordingley comment works well. – Sergey Zhukov Apr 08 '16 at 06:49
  • 4
    `` works well in many situations – khargoosh Apr 11 '16 at 23:45
  • 3
    using `type="tel"` is actually wrong even you can get the work done. there are different values for the `input` element's `type` attribute. [you can find them here.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) its always better to use proper ways instead of simple hacks. – Pankaja Gamage Jun 02 '17 at 10:23
  • Indeed using type="tel" where you need type="number" is an semantic error and lead to have the wrong keyboard on mobile devices. – Promo Apr 05 '18 at 13:49
  • div#floorMapScaleLength input[type=number]::-webkit-inner-spin-button, div#floorMapScaleLength input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } worked for me – spacedev Jul 03 '18 at 15:27
  • I have used this thing and it worked well except that the arrows were replaced by a hyphen kind of appearance, so this is what I did and it works fine now: input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: -999; } . Probably only using z-index:-999 would also work. – Z.T Feb 22 '19 at 09:21
  • I found another good answer about it. We need also declare properties for firefox: ``` input[type="number"] { -moz-appearance: textfield; } input[type="number"]:hover, input[type="number"]:focus { -moz-appearance: number-input; } ``` – Darex1991 Jun 27 '19 at 11:42
  • not working on firefox man – Mustkeem K Aug 15 '20 at 09:33
  • Its worked as expected. – Sohan Jangid Jan 22 '21 at 17:52
15

Those arrows are part of the Shadow DOM, which are basically DOM elements on your page which are hidden from you. If you're new to the idea, a good introductory read can be found here.

For the most part, the Shadow DOM saves us time and is good. But there are instances, like this question, where you want to modify it.

You can modify these in Webkit now with the right selectors, but this is still in the early stages of development. The Shadow DOM itself has no unified selectors yet, so the webkit selectors are proprietary (and it isn't just a matter of appending -webkit, like in other cases).

Because of this, it seems likely that Opera just hasn't gotten around to adding this yet. Finding resources about Opera Shadow DOM modifications is tough, though. A few unreliable internet sources I've found all say or suggest that Opera doesn't currently support Shadow DOM manipulation.

I spent a bit of time looking through the Opera website to see if there'd be any mention of it, along with trying to find them in Dragonfly...neither search had any luck. Because of the silence on this issue, and the developing nature of the Shadow DOM + Shadow DOM manipulation, it seems to be a safe conclusion that you just can't do it in Opera, at least for now.

Community
  • 1
  • 1
jamesplease
  • 12,547
  • 6
  • 47
  • 73
11

There is no way.

This question is basically a duplicate of Is there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera? but maybe not a full duplicate, since the motivation is given.

If the purpose is “browser's awareness of the content being purely numeric”, then you need to consider what that would really mean. The arrows, or spinners, are part of making numeric input more comfortable in some cases. Another part is checking that the content is a valid number, and on browsers that support HTML5 input enhancements, you might be able to do that using the pattern attribute. That attribute may also affect a third input feature, namely the type of virtual keyboard that may appear.

For example, if the input should be exactly five digits (like postal numbers might be, in some countries), then <input type="text" pattern="[0-9]{5}"> could be adequate. It is of course implementation-dependent how it will be handled.

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • you can achieve the same functionality your trying to preserve and also remove the spinners... – JayD Aug 13 '14 at 18:32
  • 5
    The spinners are completely useless if you want to input big numbers, such as money amounts. At the same time you might need the min and max attributes for them. Example, how much do you want to invest? It would be a thousands amount, but it might have min of 5000 and max of 20000. Spin that, baby. – Puce Feb 18 '15 at 10:25
  • 1
    @Puce You can add arbitrary increment steps to the spinners. – machine yearning May 22 '18 at 21:26