Make WordPress Core

Opened 9 months ago

Last modified 6 weeks ago

#53115 accepted enhancement

Twenty Twenty: number inputs have too much padding

Reported by: helgatheviking Owned by: sabernhardt
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css Cc:


The number input has so much padding that the browser's up/down buttons are not clickable.

With padding, the cursor never turns into a pointer cursor

With padding removed, the cursor turns into a pointer and the up/down buttons are clickable

Note this gif is using WooCommerce.. which is applying a width to the input

.single-product form.cart input {
    width: 5em;

However, tweaking the width doesn't seem to have an impact one way or the other.

Attachments (3)

number-input-woocommerce-ltr-firefox.png (9.5 KB) - added by sabernhardt 8 months ago.
WooCommerce number input after patch (LTR) in Firefox
number-input-woocommerce-rtl-firefox.png (10.3 KB) - added by sabernhardt 8 months ago.
RTL number inputs have the increment buttons on the other side
53115.patch (773 bytes) - added by sabernhardt 8 months ago.
slight edit: adding zero before decimal point

Download all attachments as: .zip

Change History (20)

#1 @SergeyBiryukov
9 months ago

  • Component changed from General to Bundled Theme
  • Summary changed from Twenty Twenty number inputs have too much padding to Twenty Twenty: number inputs have too much padding

#2 @sabernhardt
9 months ago

  • Focuses css added

Except for a few random times, I have this problem in Firefox 88 (Windows 10 Home 20H2) when there is padding on the number input. However, I can use the increment buttons in Chromium-based browsers: Chrome, Edge, Opera, Vivaldi.

If this is a Firefox bug, it might be worth considering input[type="number"] {-moz-appearance: textfield} to hide those buttons so no one tries using them unsuccessfully. Using the arrow keys still works.

(Regarding the unrelated issue about the input width, WooCommerce already plans to make that selector more specific.)

#3 @helgatheviking
8 months ago

I was about to re-post this issue because it drives me nuts! Good thing I searched first. :)

Looks like you can set the padding to

padding-right: .5rem;

and the buttons become clickable again.


I hate SVN with the fire of 10,000 suns so here's a pull request at github:

The RTL is a bit of a guess... I assumed that the number input buttons are on the other side in RTL?

#4 @sabernhardt
8 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.8

8 months ago

WooCommerce number input after patch (LTR) in Firefox

8 months ago

RTL number inputs have the increment buttons on the other side

#5 @sabernhardt
8 months ago

  • Owner set to sabernhardt
  • Status changed from new to accepted

@helgatheviking Thanks for the patch! That works for me, both with the WooCommerce quantity inputs and with a number input within a Custom HTML block. (Yes, the padding adjustment belongs on the other side for RTL because the increment buttons are on the opposite side.)

I tested on Windows browsers: Firefox, Chrome, Edge, Opera, Vivaldi

For consistency, though, it would be good to add a zero before the decimal for these values within both stylesheets:

input[type="number"] {
	padding-right: 0.5rem;

8 months ago

slight edit: adding zero before decimal point

#6 @sabernhardt
8 months ago

  • Keywords needs-testing added

53115.patch has the same change as PR 551, but with the leading zeros.

#7 @sabernhardt
8 months ago

  • Milestone changed from 5.8 to 5.9

Unless a committer thinks the patch is ready now, this can be tested and reviewed in the next release cycle.

This ticket was mentioned in Slack in #core by chaion07. View the logs.

3 months ago

#9 @chaion07
3 months ago

Hi @helgatheviking! Thank you so much for reporting this. We discussed this ticket during a recent bug-scrub and based on the discussion, we feel the need for testing to confirm. So far the patch looks good. Eventually it would be ready for commit. Cheers!

Props: @poena

This ticket was mentioned in Slack in #core-test by justinahinon. View the logs.

2 months ago

#11 @justinahinon
2 months ago

I tried to reproduce the initial issue, but was not able to do so.


  • WordPress:
  • Plugins: WooCommerce
  • Theme: Twenty Twenty
  • OS: macOS Monterey 12.0
  • Browsers: Firefox Developer Edition 95.0b5 & Google Chrome 95.0.4638.69

Testing instructions

  • Install and activate Twenty Twenty Theme
  • Install and activate WooCommerce
  • Create a sample product
  • Go to the product page, and check if you can use the Add to Cart input buttons

#12 @sabernhardt
2 months ago

This was a problem with Firefox/Windows, but I do not experience trouble with the increment buttons using Firefox 94 (or other Windows browsers). @helgatheviking Do you still have trouble with the buttons?

Even if the browser fixed the button issue, it may be worth editing the padding anyway so the buttons are not indented as much or to accommodate large numbers in fixed-width inputs.

This ticket was mentioned in Slack in #core by sabernhardt. View the logs.

2 months ago

#14 @sabernhardt
2 months ago

Very little time remains for adding bug fixes to the 5.9 release. If a committer would like to include this in Beta 1, feel free to adjust the milestone.

#15 @sabernhardt
2 months ago

  • Milestone changed from 5.9 to Future Release

#16 @helgatheviking
2 months ago

@sabernhardt Tested today with FireFox 94.0.1 on Windows and can no longer reproduce the bug, but do agree a little less padding to reduce the indentation on the up/down buttons would still be nice.

#17 @sabernhardt
6 weeks ago

  • Milestone changed from Future Release to 6.0
  • Type changed from defect (bug) to enhancement

The WordPress admin CSS already has something similar in forms.css for small-text and tiny-text inputs.

Note: See TracTickets for help on using tickets.