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"/>

Remove spinner on number type paper-input in Firefox

After a day of tinkering around, I was able to solve my own problem. It looks like var(--paper-input-container-shared-input-style_-_-webkit-appearance) is automatically set as the value for the <input>'s -moz-appearance on Firefox.

I was able to do this to remove the spinner on Chrome and Firefox, as well as fix the width issue that came up, too:

<style>
   paper-input {
     --paper-input-container-input-webkit-spinner: {
       -webkit-appearance: none;
     }
     --paper-input-container-shared-input-style: {
       width: 50px;
       -webkit-appearance: textfield;
     }
     width: 50px;
   }
</style>

Demo: https://glitch.com/edit/#!/zippy-crime

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" />

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>

input type number hide arrows from right part of input

Just add some class to distinguish inputs:

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

First number: <input type="number" class="no-spinner"><br>Second number: <input type="number"><br>

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