up vote 49 down vote favorite
12

This question already has an answer here:

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?

share|improve this question

marked as duplicate by animuson♦ Jul 25 '14 at 20:05

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
    
I think this is not possible the standard just allows compairing of strings. – rekire Oct 28 '12 at 7:31
    
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 – drumwolf Jan 15 '14 at 17:34
up vote 136 down vote accepted

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; 
}

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

share|improve this answer
1  
Especially the link is important! Thanks – craphunter Jan 8 '15 at 23:38
13  
Because not everyone uses a WebKit-based browser: stackoverflow.com/questions/23372903/… – Michael Cordingley Jul 20 '15 at 19:19
    
i want to remove the increment and decrement property when click arows – Jihin Raju Feb 25 '16 at 13:22
3  
Does not work with firefox (v 45.0). The link from @michael-cordingley comment works well. – Sergey Zhukov Apr 8 '16 at 6:49
2  
<input type="tel" /> works well in many situations – khargoosh Apr 11 '16 at 23:45
up vote 10 down vote

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.

share|improve this answer
up vote 7 down vote

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.

share|improve this answer
    
you can achieve the same functionality your trying to preserve and also remove the spinners... – JayD Aug 13 '14 at 18:32
3  
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

Not the answer you're looking for? Browse other questions tagged or ask your own question.