Disable Webkit'S Spin Buttons on Input Type="Number"

Disable webkit's spin buttons on input type=number?

The below css works for both Chrome and Firefox

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

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

Can I hide the HTML5 number input’s spin box?

This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {    /* display: none; <- Crashes Chrome on hover */    -webkit-appearance: none;    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */}
input[type=number] {    -moz-appearance:textfield; /* Firefox */}

<input type="number" step="0.01" />

Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29

According to this blog post, you need to set -moz-appearance:textfield; on the input.

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

<input type="number" step="0.01"/>

How to always display numerical input spinners on mobile and iPad

At some point it's hard and tricky to get a consistent result across the platforms for a native element like an input. For this reason, I would recommend you to re-create one that 'fake' the native behaviour by using some javascript. Here is a very basic example:

const input = document.querySelector('input[type=number]')

const increment = () => {
  input.value = Number(input.value) + 1
}
const decrement = () => {
  input.value = Number(input.value) - 1
}

document.querySelector('.spinner.increment').addEventListener('click', increment)
document.querySelector('.spinner.decrement').addEventListener('click', decrement)

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

.number-input {
  position: relative;
  width: fit-content;
}

input {
  width: 60px;
}

.spinners {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 1px;
  transform: translateY(-50%);
}

.spinner {
  font-size: 7px;
  border: none;
  padding: 0 1px;
}

.spinner:hover {
  background: lightgrey;
}

<div class="number-input">
  <input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8">
  <div class="spinners">
    <button class="spinner increment">▲</button>
    <button class="spinner decrement">▼</button>
  </div>
</div>