How to remove the arrows from input

Browser compatibility

The above snippet focuses on WebKit-based browsers like Opera, Chrome, and Safari. But in this chaotic browser world, you might want to break through the barricades put up by some non-WebKit browsers too.

Specifically, ancient relics of Firefox may still need -moz-appearance: none;. Here's the fortified version that covers all bases:

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* No spinners for you, WebKit! */
  -moz-appearance: none;    /* Mozilla? More like No-zilla! */
  appearance: none;         /* Begone, spinners! */
  margin: 0;                /* Zeroing out for good measure */
}


Dive into browser mechanics

Not all browsers are programmed the same, and they may render number input styling based on their individual rendering engines. The -webkit-appearance targets WebKit and Blink engines (used by Opera, Chrome, Safari), whereas the new appearance property is being widely adopted.

Always put your CSS deliverables through the cross-browser compatibility obstacle course for smooth sailing.

Input type: To change or not to change

Although removing the arrows simplifies the number input field, it's a smart move to keep the type "number". The browser holds on to the numeric keypad on mobile devices and maintains the validation for numeric input. Use the pattern attribute for advanced validation, but remember to factor in the limitations of Opera's Shadow DOM manipulation.

Addressing accessibility

While clean visuals are appealing, it's crucial to weigh the accessibility factors. For users dependent on assistive technologies, the spinners are navigational aids. If you choose to remove them, ensure there are other ways for users to increment and decrement values.

Exploring alternatives

If the numeric spinner is a hitch in your design or non-essential, consider the alternate UI elements like slider controls or custom components enhanced by JavaScript.