I have been getting a series of complaints about how 2 digit fields in my HTML forms everywhere do not appear to hold 2 digits – making them visually useless for data entry.
The following HTML is used to produce a textbox input that is intended to show up as a 2 character input – and has been showing up as 2 character inputs since the good ol' HTML4/XHTML days – shows up as a 1 character input on Safari for Mac OS and iOS:
<input id="TextBox" maxlength="2" size="1" />
To make this Text Box appear correctly on all browsers everywhere requires additional styling, particularly a width statement:
<input id="TextBox" maxlength="2" size="1" style="width: 2em" />
Width styles are recommended, and absurd:
If it aint broke don’t fix it. This width style has always been the recommended approach of sizing textboxes – however – the unpredictability of “em” measurements (particularly with user font preferences) makes a simple method of putting a small textbox on the screen precariously annoying.