4

CSS for input type number put in both view media query and desktop view(works perfectly) and not working in mobile view.

<style>
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
    }
</style>

Here is the screenshot of issue. http://prntscr.com/qd34cd (works perfectly in desktop) http://prntscr.com/qd359j (no arrows visible on mobile)

Matus Dubrava
  • 13,637
  • 2
  • 38
  • 54
Dipesh Kakkad
  • 41
  • 2
  • 5
  • Each OS and device have different UI looks and usability concepts. As of that, the input element types are only described in what their purpose, attribute, properties, and valid values are, but not how they have to look. So the look can change at any time in the browsers. Having small arrows on a mobile device to controlling them using a finger might not be that usable, as of that the browser venders a free to leave out those arrows and implement the limitation to numbers can be achieved using the on-screen keyboard. – t.niese Dec 21 '19 at 15:02

1 Answers1

0

Not all browsers support spinner arrows for input elements of type number.

If you must guarantee that any browser will display spinner arrows, I think your best bet is to turn them off altogether (one way to do so would be to set your input element to type text, or consult any of a million pages explaining how to remove the spinners), and add your own. You could have little "plus" and "minus" buttons after the input box to achieve the same effect, plus it would look the same across browsers.

Alexander van Oostenrijk
  • 4,644
  • 3
  • 23
  • 37
  • 1
    I don't want to add custom and yes it looks perfectly in all browser supported only problem in mobile view in chrome and also I tried to change the type number to text but still it didn't help me. Is there any possibility to do that in default? Any solution? – Dipesh Kakkad Dec 20 '19 at 05:19