How to remove the arrows from input type number in Opera

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

User · Accepted Answer

I ve been using some simple CSS and it seems to remove them and work fine    x000D   x000D  input type number   -webkit-inner-spin-button   x000D  input type number   -webkit-outer-spin-button    x000D      -webkit-appearance  none  x000D      -moz-appearance  none  x000D      appearance  none  x000D      margin  0   x000D    x000D   lt input type  number  step  0 01   gt  x000D   x000D   x000D    This tutorial from CSS Tricks explains in detail  amp  also shows how to style them

User · Answer

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

User · Answer

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  amp  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  lt input type  text  pattern   0-9  5   gt  could be adequate  It is of course implementation-dependent how it will be handled

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

Examples related to css

Examples related to html

Examples related to forms

Examples related to input

Examples related to opera