1710006 - Arrow buttons of input type=number not clickable, when padding (-right) is set.

Status: RESOLVED DUPLICATE of bug 1707070

(Core :: Layout: Form Controls, defect)

Description

[holmrichter]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

Steps to reproduce:

Open a html file in Firefox, containing this small html sample in FireFox 88.

<h1>Padding-right: 0px</h1>
<input type="number"style="height:30px; padding-right:0px;"/>
<h1>Padding-right: 5px</h1>
<input type="number"style="height:30px; padding-right:5px;"/>
<h1>Padding-right: 10px</h1>
<input type="number"style="height:30px; padding-right:10px;"/>
<h1>Padding-right: 20px</h1>
<input type="number"style="height:30px; padding-right:20px;"/>

Actual results:

The clickable area of the arrow buttons on the right side will become smaller, the higher the padding on the right side is.
You will not be able to click the buttons in the last input field.

Expected results:

Buttons should be clickable.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Alice0775 White]

Seems duplication of Bug 1707070