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="text"],
|
||||||
input[type="password"],
|
input[type="password"],
|
||||||
input[type="email"],
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="url"],
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -342,7 +346,9 @@ textarea {
|
|||||||
background: var(--bg-secondary);
|
background: var(--bg-secondary);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: var(--radius-md);
|
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;
|
font-family: inherit;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
transition: all var(--transition-fast);
|
transition: all var(--transition-fast);
|
||||||
@@ -362,6 +368,17 @@ textarea {
|
|||||||
font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
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 {
|
select {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
@@ -3589,6 +3606,11 @@ select {
|
|||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="password"],
|
input[type="password"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="url"],
|
||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|||||||
Reference in New Issue
Block a user