Firefox平板端Numeric Input控件上下按钮过小问题求助

I’ve run into this exact headache with Firefox’s number input spinners on convertible devices like the Lenovo Yoga—those tiny up/down buttons don’t scale with page zoom, making them nearly impossible to tap accurately on touchscreens. Here are a couple of reliable, developer-focused solutions:

1. Customize Default Spinner Styles (Quick Fix) #

Firefox lets you target its number input spinners with vendor-specific CSS pseudo-elements. By using relative units instead of fixed pixels, you can make the spinners scale with the input box and page zoom automatically:

/* Target Firefox's number input spinners */
input[type="number"]::-moz-number-spin-up,
input[type="number"]::-moz-number-spin-down {
  width: 1.5em; /* Scales with the input's font size */
  height: 50%; /* Takes half the input's total height */
  font-size: inherit; /* Matches the input's text size */
  cursor: pointer;
}

/* Optional: Ensure the input itself has enough touch area */
input[type="number"] {
  min-height: 2.5em;
  padding: 0.5em;
  font-size: 1rem; /* Base size that scales with page zoom */
}

This makes the spinners grow and shrink alongside the input when users zoom the page, and the expanded touch area fixes the tap accuracy issue immediately.

2. Replace Default Spinners with Custom Buttons (Full Control) #

If you want even more control over the touch experience, hide Firefox’s default spinners entirely and add your own custom +/- buttons. This ensures consistent behavior across all touch-enabled devices:

HTML #

<td>
  <div style="display: flex; align-items: stretch; width: 100%;">
    <input 
      name="1_DISC_NO" 
      id="1_DISC_NO" 
      value="01" 
      style="width: calc(100% - 48px);" 
      type="number" 
      min="1" 
      max="999"
    >
    <div style="display: flex; flex-direction: column; width: 48px;">
      <button type="button" onclick="updateNumber('1_DISC_NO', 1)" style="flex: 1;">+</button>
      <button type="button" onclick="updateNumber('1_DISC_NO', -1)" style="flex: 1;">-</button>
    </div>
  </div>
</td>

JavaScript #

function updateNumber(inputId, change) {
  const input = document.getElementById(inputId);
  const currentVal = parseInt(input.value) || parseInt(input.min);
  const newVal = currentVal + change;

  // Keep value within min/max bounds
  if (newVal >= parseInt(input.min) && newVal <= parseInt(input.max)) {
    // Maintain 2-digit formatting (e.g., 01 instead of 1)
    input.value = newVal.toString().padStart(2, '0');
  }
}

CSS #

/* Hide Firefox's default spinners */
input[type="number"]::-moz-number-spin-up,
input[type="number"]::-moz-number-spin-down {
  display: none;
}

/* Style input and custom buttons for touch accessibility */
input[type="number"] {
  min-height: 2.5em;
  padding: 0.5em;
}

div button {
  font-size: 1.2em;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  /* Enlarge touch target to meet accessibility standards */
  min-height: 44px;
  min-width: 44px;
}

div button:hover {
  background: #e0e0e0;
}

This approach gives you full control over button size, styling, and touch area—no more tiny, un-tappable spinners.

Bonus: User-Side Workaround (For Quick Fixes) #

If users need an immediate fix without waiting for your update, they can adjust Firefox’s interface scaling:

1. Type about:config in the address bar and accept the warning
2. Search for layout.css.devPixelsPerPx
3. Set a value like 1.5 to scale the entire interface (note: this affects all Firefox UI elements, not just your site)

内容的提问来源于stack exchange，提问作者Paul Taylor