Remove increment and decrement icon from input field

Hidden in the comments in the post you linked is a suggestion to use the tel input type:

<input type="tel" value="111">

A few suggestions regarding the number type:

The number input type accepts min and max attributes to set number constraints.

<input min="1" max="10" type="number" value="1">

Seeing as you seem to be using Ember, this would probably be more appropriate:

{{input type="number" min="1" max="10"}}

If you truly want to hide the buttons:

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

input[type=number] {
  -moz-appearance: textfield;
}
<input type="number" min="1" max="10" value="1">

You can still use the arrow keys to increase/decrease the value.


You can use like this way
It worked for me

<html>
<head>
<style>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
</style>
</head>
Hello <input type='number'>
</html>

Tags:

Javascript

Recent Posts