How to remove the arrows from lightning:input[type=”number”]?

I think this is a generic question and Salesforce devs have looked for the ways to get rid of the spin buttons on the input field without changing it to text type for a purely numeric behaviour. You just need a few lines of CSS to solve your problem.

We need some CSS which work across the browsers. Any browser like Safari, Chrome and Firefox have a specific bahaviour for number type inputs.

Component.css

In the CSS component of the Lightning component bundle, we need to include the following styling.

/* For Firefox browser */
.THIS input[type='number'] {  
   -moz-appearance:textfield;
}
/* For webkit browsers like Chrome and Safari */
.THIS input[type=number]::-webkit-inner-spin-button,
.THIS input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

So it will look like as shown here.

In case if you have any concern or queries then please feel free to comment on the post.

Have fun with the CSS!!