Remove increment and decrement icon from input field

Question

I have a input as follows:

<input id="phone_area_code" maxlength="3" type="number" class="ember-view ember-text-field">

Upon rendering, it automatically adds the increment and decrement buttons as shown below. And because of this, the maxLength doesn't work (eg: if input is 999 and I click increment, it allows 1000)

I tried the following answer:

https://stackoverflow.com/a/22306944

But, no use. How to get rid of these buttons?

Answer 1

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.

Answer 2

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