Closed Bug 1108469 Opened 5 years ago Closed 4 years ago

Spin button should size with number input


(Core :: Layout: Form Controls, defect)

Not set





(Reporter: abhranilnaha, Unassigned)





(2 files)

Attached image input_number.png
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko

Steps to reproduce:

Please create a number type input field in  a form and look at the step icons in Firefox and Chrome.

Actual results:

I am able to change the icon sizes in Chrome using the below CSS, but not able to do so in Firefox.

.input[type="number"] {
	padding: 0 0 0 6px;
input[type=number]::-webkit-outer-spin-button {
	opacity: 1;

Expected results:

Need CSS support to change the step icon size in Firefox just like Chrome. Please find attached the screenshot of input number field in Firefox and Chrome.
Please provide a minimal, self-contained testcase for Firefox.

Also note that -webkit- is obviously WebKit specific CSS so this won't work in Firefox anyway.
Flags: needinfo?(abhranilnaha)
Attached file inputNumber.html
Please find attached the self contained test case. Please open it in Firefox as well as in Chrome. Please notice the step buttons took up whole space in Chrome but in Firefox they did not take up whole space in input box. What can I do so that those buttons take up whole space in Firefox  input box?
Flags: needinfo?(abhranilnaha)
Component: Untriaged → Layout: Form Controls
Product: Firefox → Core
Blocks: 930010
Ever confirmed: true
Summary: I want to change the size of the input number step icons → It should be possible to style input type="number" spin buttons from content
As a workaround, you can use -moz-appearance: none and use extra (pseudo-) elements to achieve what you want, but this is not entirely trivial (that is, to make the buttons behave the same as the original ones in respecting step, min and max and so on).
I added a simplistic example and clarified the title, as it's just about letting the spin button resize, not about actual styling of the button.

OS: Windows 7 → Unspecified
Hardware: x86_64 → Unspecified
Summary: It should be possible to style input type="number" spin buttons from content → Spin button should size with number input
Version: 34 Branch → unspecified
See Also: → 1175824
As currently described by the Summary field for this bug, his is a duplicate of bug 947365. As described by comment 0 it may be a duplicate of bug 978320.
Closed: 4 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 947365
You need to log in before you can comment on or make changes to this bug.