How to remove the arrows from input[type="number"] in Opera [duplicate]

Question

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?

Plethora

I think this is not possible the standard just allows compairing of strings. – Hargis

I know this is an old question, but just in case it still hasn't been answered, does this link help? css-tricks.com/snippets/css/turn-off-number-input-spinners – Imaret

now a days you can use <input inputmode="numeric" .. reference : youtu.be/alGcULGtiv8?t=630 – Shanleigh

Answer 1

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

Fairlie

Because not everyone uses a WebKit-based browser: #23373403 – Upheave

i want to remove the increment and decrement property when click arows – Choir

Does not work with firefox (v 45.0). The link from @michael-cordingley comment works well. – Hoebart

<input type="tel" /> works well in many situations – Eider

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. its always better to use proper ways instead of simple hacks. – Mattiematting

Indeed using type="tel" where you need type="number" is an semantic error and lead to have the wrong keyboard on mobile devices. – Rodmun

div#floorMapScaleLength input[type=number]::-webkit-inner-spin-button, div#floorMapScaleLength input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } worked for me – Bonitabonito

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

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; } ``` – Cinerator

not working on firefox man – Burson

Its worked as expected. – Fredrika

Answer 2

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.

Wrongdoer

Answer 3

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.

Drabble

you can achieve the same functionality your trying to preserve and also remove the spinners... – Fairlie

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

@Thorne You can add arbitrary increment steps to the spinners. – Flanigan