WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 15 months ago

#34157 new enhancement

Style the increment and decrement buttons for number inputs

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

Description

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

https://i.imgur.com/mtmggQM.png

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?

Considerations:

  • 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 (4)

#1 @mark-k
2 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
21 months ago

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

#3 @karmatosed
15 months 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
15 months 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)

http://codepen.io/xavortm/pen/JRoYLr

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.

Note: See TracTickets for help on using tickets.