The Width of Number Inputs

This is one of those blog posts written for when I have this issue in the future. I hope you find it helpful as well.

The browser default width for number inputs in Safari and Chromium browsers (Edge, Chrome, etc) is based on the min and max attributes. When both are set, the width of the element is based on the magnitude of the maximum allowed number. For example, if the max value is 1000 the element will be sized to fit 4 characters. If either of the min or max values aren't present, then the default width is the same as a plain text input.

This shrink fit causes visual discrepancies if text inputs don't have width specified and you want number inputs to match that size while using the min and max attributes. There is no way to set the width to be the default length of the element without the attributes. Instead, the options for styling are to not use one of those attributes, or to set an explicit width on both text and number inputs.

Using Safari or a Chromium browser, see this comparison of elements:

It's worth noting that select elements have this same behaviour, shrinking their width to fit their content.