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:
+23
-1
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user