Remove the up/down increment/decrement buttons on number inputs using CSS

Question

How can you remove the up/down increment/decrement buttons on number inputs using CSS?

I want to do this to a number input for money, as the arrows interfere with the currency symbol that I have added as per this SO answer.

Answer 1

The following CSS code will remove the arrows on all inputs:

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

This can be modified to:

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

Which will only modify the inputs that are contained in an element with the class money, in case you want to use some other number inputs with the increment/decrement arrows.

Answer 2

The following CSS will work for most browsers. The following method will allow you to use it as a text box with only numbers allowed. Also, This method allows you to copy-paste only numbers(it removes alphabets and keeps numbers when you paste) in the box without any extra line of coding.

Simply you have to apply the class name number-to-text to the input box.

<input type="number" value="5" class="number-to-text">

Add following CSS

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

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

The following jquery code will disable the number input spin button behaviour (disable increment/decrement numbers by pressing the up and down arrow keys).

$('input.number-to-text').keydown(function(event) {
    if ([38, 40].indexOf(event.keyCode) > -1) {
        event.preventDefault();
    }
});