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

user_15159198 0
Viewed 268

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.

number input increment/decrement arrows interfering with currency sign

css html
1 Answers

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.

Solution

user_151591980
Related