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!!
I am certified Salesforce Developer with Sales and Service cloud certifications. I am a true believer in #GivingBack principle and a Salesforce enthusiast. I am working as a member of our #SalesforceOhana to learn and help other fellow Trailblazers of the community to grow and learn.
“I’m a true believer in karma. You get what you give, whether it’s bad or good.”