How to usecustom CSS in CSS
This approach targets the pseudo-elements ::-webkit-inner-spin-button and ::-webkit-outer-spin-button to hide the arrow control in WebKit-based browsers. It also sets the -moz-appearance property to textfield for Mozilla Firefox to remove its default styling.
How to Remove Arrow on Input Type Number with Tailwind CSS ?
When using the input element with the type=”number” attribute, most browsers will display an arrow control (also known as a spinner) at the right side of the input field. This control allows users to increment or decrement the value using the up and down arrows. However, in some cases, you may want to remove this arrow control for styling or UX purposes.
In this article, we’ll see How to Remove Arrow on an Input type Number with Tailwind CSS.
To remove the arrow on an input type number using Tailwind CSS, you can apply custom CSS classes to the input element. The classes will override the default browser styles for the number input.
The below approach will be used to remove the arrow on the number input using Tailwind CSS: