Most of the posts on this site are simply about raising awareness for underutilized HTML and CSS features.

This week we’ll be doing that, for those who don’t know about this feature, but I also want to use it to raise a bit of awareness around some of the limitations of <input type="number"> as well.

Before we worry about that, why do we need it in the first place?

The Basics

When we use type="numeric, we’re telling the browser that only numbers are valid.

Chrome will actually prevent users from entering other characters, while other browsers will allow the input of other characters, but if a form is submitted with anything but numbers, it will be be flagged as invalid at that point.

Also, on mobile devices, this input type modifies mobile keyboards to facilitate number entry.

On desktop, each browser renders things a little differently, but in all cases, users get little up and down arrows on the far right of the input.

Here’s a simple one you can play with. If you are on desktop, you may have to hover on it to see the arrows, depending on what browser you are using.

Enhancing Mobile Keyboards even more

One way to refine the input experience even more on iOS is to use the inputmode="numeric" attribute if all you’re after is a number (Chrome already has a more simplified keyboard to start with).

<input type="number" inputmode="numeric">

Desktop Quirks

On desktop browsers, input type="number" comes with those little up and down arrows on the right side of the input that I mentioned earlier, which vary slightly depending on the OS and browser.

Imagine having to click or hold these to reach large numbers—far from ideal for user experience.

These arrows are convenient for small number adjustments but can be tedious for longer inputs, and they can look a little ugly.

There are a lot of situations where you’ll want a number input without those arrows, so you can remove them from input type="number" on desktops using some CSS.

/* Chromium & Safari */
input[type=number]::-webkit-inner-spin-button {
  display: none;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

An Alternative Strategy

Another approach is to revert to input type="text" while maintaining the numeric input functionality via inputmode and a pattern attribute.

Doing this means we don’t have to worry about the arrows ever showing up (assuming you don’t want them in the first place).

Of course, now any character is considered valid, though we can use a pattern to limit it to numbers only once again.

<input type="text" inputmode="numeric" pattern="[0-9]+">

This might seem flawed, as users can still enter other characters and they’ll only be flagged as invalid when the user hits submit, but as I mentioned earlier, neither Firefox or Safari will prevent other characters even if you’re are using type="number" anyway.