Prevent the need to zoom into inputs with CSS

Published

Adrian Roselli describes a quick, effective way to make HTML inputs inherit the styles of the page they're on, rather than deriving their appearance from operating system conventions. The following (simplified) declaration makes the font match the input's surroundings; in particular, it makes its font-size equivalent to 1em:

textarea,
input {
	font: inherit;
}

If you use mobile Safari, you've probably noticed that it sometimes zooms into inputs as you focus them, to make them easier to read and type into. It happens whenever an input has its text smaller than 16px, and it's a sensible thing to do. However, in some cases, it's purely accidental: you get this barely zooming into an input because it happens to have a computed font size of 15px, or 14px, as inherited from its parent.

To proactively fix this, and spare the user a useless interaction, I got into the habit of throwing in an extra declaration:

button,
select,
textarea,
input {
	font-size: max(16px, 1em);
}

In browsers supporting the max() function — including, thankfully, Safari — it prevents the inherited font size of inputs from going below 16px, and avoids the zoom behavior.

Nice and easy!

Some notes: