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.
[sourcecode language=”css”]
/* 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;
}
[/sourcecode]
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!!