1108469 - Spin button should size with number input

Status: RESOLVED DUPLICATE of bug 947365

(Core :: Layout: Form Controls, defect)

Description

[Abhranil Naha]

Attachment: 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-inner-spin-button,
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.

Comment 1

[Andre Klapper]

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.

Comment 2

[Abhranil Naha]

Attachment: 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?

Comment 3

[:Gijs (he/him)]

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).

Comment 4

[Sebastian Zartner [:sebo]]

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.

Sebastian

Comment 5

[Jonathan Watt [:jwatt]]

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.