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

Question

I just want to remove these arrows, convenient in certain situations.

However, I would like to keep the browser aware that the content is purely numerical. Therefore, changing this parameter to input[type="text"] not an acceptable solution.

---

Now that Opera is based on webkit, this question is a duplicate: Is it possible to hide the input field for the inputs of HTML5 numbers?

Answer 1

I use simple CSS and seem 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; } 

This CSS Tricks tutorial explains in detail and also shows how to style them.

Answer 2

These arrows are part of the Shadow DOM , which are basically the DOM elements on your page that are hidden from you. If you are new to this idea, you can find a good introduction here .

For the most part, the Shadow DOM saves us time and that's good. But there are examples like this question where you want to change it.

You can change them in Webkit now with the right selectors , but this is still in the early stages of development. The shadow DOM itself does not yet have unified selectors, so the web whale selector is proprietary (and this is not just a matter of adding -webkit , as in other cases).

Because of this, it seems likely that Opera simply did not have time to add this. However, finding resources in Opera Shadow DOM modifications is tough. Several unreliable internet sources . I found that everyone says or suggests that Opera does not currently support manipulating the Shadow DOM.

I spent a little time browsing the Opera website to find out if this was mentioned, and also trying to find them in Dragonfly ... neither the search was successful. Due to the silence on this issue and the evolving nature of manipulating the DOM + Shadow DOM, the Shadow DOM seems to be a safe conclusion that you simply cannot do this in Opera, at least for now.

Answer 3

There is no way.

This question is basically a duplicate. Is there a way to hide the new HTML5 backrest controls shown in Google Chrome and Opera? , but perhaps not a complete duplicate, as motivation is given.

If the goal is to “understand the browser is purely numerical,” then you need to think about what that really means. Arrows or spinners are part of a more convenient number entry in some cases. The other part checks to see if the content is a valid number, and in browsers that support HTML5 input enhancements, you can do this using the pattern attribute. This attribute may also affect the third input function, namely the type of virtual keyboard that may appear.

For example, if the input must be exactly five digits (for example, postal numbers may be in some countries), then <input type="text" pattern="[0-9]{5}"> may be sufficient. This, of course, depends on the implementation of how this will be handled.