How to show Up/Down arrows for Input type number in mobile view?

Question

For an input type number, up/down arrows on the right side of the input box in web view is easily displayed. I have also preventDefaulted the typing for the input so you are forced to use the arrows to increase/decrease number. But the arrows won't show in mobile view. Is there any way to force arrows in the mobile view so that user won't type in the number but uses the increment/decrement ??

Answer 1

I hope this will resolve the issue. Note: you can modify height and width according to your needs.

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 opacity: 1 !important;
 margin: 0;
 width: 15px;
 height: 35px;
}

Answer 2

The way that input fields work, are defined by the browser and/or operating system that the user will use. You could use a method as described in this answer. But if you want to have full control over the user experience, you should make your own arrows. I've wrote this snippet below that you could use as a starting point.

const updateValue = (qry, type, value) => {
  const el = document.querySelector(qry)
  const currentValue = parseInt(el.value,10)
  let maxValue = null
  let minValue = null
  if (el.getAttribute("max")) {
    maxValue = parseInt(el.getAttribute("max"), 10)
  }
  
  if (el.getAttribute("min")) {
    minValue = parseInt(el.getAttribute("min"), 10)
  }
  
  if (type=="add") {
    if (typeof maxValue == 'number' && currentValue + value > maxValue) {
      el.value = maxValue
    } else {
      el.value = currentValue + value
    }
  } else if (type=="subtract") {
    if (typeof minValue == 'number' && currentValue - value < minValue) {
      el.value = minValue
    } else {
      el.value = currentValue - value
    }
  } 
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#input {
  text-align: center;
  width: 2em;
}

<span onClick="updateValue('#input','subtract', 1)">▽</span>
<input type="number" size="10" min="0" max="8" value="4" id="input"/>
<span onClick="updateValue('#input','add', 1)">△</span>

Answer 3

try this media query

@media only screen and (max-width : 1024px) {
    input[type=number]::-webkit-inner-spin-button, 

    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none
      margin: 0;
    }
}