Make WordPress Core

Opened 5 years ago

Closed 4 months ago

#34157 closed enhancement (wontfix)

Style the increment and decrement buttons for number inputs

Reported by: johnbillion Owned by:
Milestone: Priority: low
Severity: normal Version:
Component: Administration Keywords: has-ui-feedback needs-patch needs-testing
Focuses: ui Cc:


The buttons shown inside input[type="number"] inputs for incrementing and decrementing the value are the smallest buttons known to man.


In Webkit at least, these can be styled using CSS, although it appears that the two buttons are styled as one single element.

Does someone want to look into this more and see if the styling of the buttons in WordPress' number inputs can be improved?


  • Should the buttons be shown persistently or only on hover? I'd prefer the former.
  • Behaviour on touch devices (buttons should probably remain hidden)
  • Differences between platforms and browsers

Change History (5)

#1 @mark-k
5 years ago

waste of time?

Those are not only the smallest buttons but also the useless ones. How many clicks will it take you to go from 7 to 50, and how many will it take you to just enter 50 in the field?

The usage of them might make sense when the step or min/max are not obvious, but then if the number of legal values is not big, maybe it is better to have a select.

IMO if it is just an "enter any number" type of field it is better to just hide it.

#2 @apaliku
4 years ago

+1 for hiding it. Im just a noob though.

#3 @karmatosed
4 years ago

  • Keywords has-ui-feedback added; ui-feedback removed

Personally I would not hide them as whilst small some users may use them, they are also an indication of the fact it can go up or down. Styling as a solution could work, but I'd not be keen to hide without use testing to see if people even then knew they could increase/decrease. Same also goes for hover, I don't feel that's a solution every user will discover.

#4 @xavortm
4 years ago

I am 95% sure this won't be the solution here, but I went and make a very small view of how these buttons can be changed using jQuery (which is why I am not a big fan of this solution)


Other than that, my opinion is that this field should stay the way it is currently. Arrows are not visible by default and are visible on hover.

Also, this article shows how it looks on most browsers - https://css-tricks.com/numeric-inputs-a-comparison-of-browser-defaults/ I am personally a fan of Opera and it's easy to click buttons, but as you can see IE is totally different, only having close (empty) button.

Styling the input field buttons will require using some sort of background image, as :after doesn't work on input fields.

#5 @johnbillion
4 months ago

  • Resolution set to wontfix
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.