Fix tiny price-input field and iOS zoom-on-focus on number inputs

input[type="number"] wasn't in the global input selector, so the price
field rendered with browser defaults: tiny font, no padding, and a
spinner that squeezed the hit area. On iOS this also caused a focus-
zoom because the rendered font size was below the 16px threshold
Safari uses to decide whether to zoom in.

Adds number/search/tel/url types to the styled input selector, bumps
the global font-size to a hard 16px (still 1rem in practice but
explicit prevents subsequent overrides), and hides the spinner via
webkit/moz appearance reset. Same treatment in the mobile @media
block. Result: price field looks identical to the nickname field and
the page no longer zooms when focusing it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
zuevav
2026-05-15 00:02:58 +03:00
parent d776870d35
commit 55c9be761c
+23 -1
View File
@@ -335,6 +335,10 @@ body {
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
width: 100%;
@@ -342,7 +346,9 @@ textarea {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 1rem;
/* 16px minimum prevents iOS Safari from zooming the page when an input
receives focus. */
font-size: 16px;
font-family: inherit;
color: var(--text-primary);
transition: all var(--transition-fast);
@@ -362,6 +368,17 @@ textarea {
font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
/* Hide the up/down spinner on number inputs so the field looks the same
as the text inputs (and the actual hit area isn't squeezed). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
select {
cursor: pointer;
appearance: none;
@@ -3589,6 +3606,11 @@ select {
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
font-size: 16px;