Cross-browser styling of input type number such that they are not longer than necessary

Question

I have several number inputs of varying lengths which I want to style such that the input boxes are not longer than necessary:

<input type=number name=short value='1' min=0 max=9 size=1 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=3 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=5 maxlength=5>

Firefox does not recognise number type input and will process the input assuming they are text boxes. Therefore the size and maxlength will be applied to the input boxes.

Chrome recognizes the number type input and will automatically limit the size of the input box based on max value plus the width of the spin(up/down) buttons.

However, Opera, which also recognizes the number type input does things differently. It uses the size value to calculate the size of the input box, or browser default if none is provided. It does not take into account the width of the spin buttons, causing part of the input to be obscured.

Is there a way to style the number inputs properly such that they are not longer than necessary and taking into account of the problem I mentioned with Opera browser?

Zoltan Toth · Accepted Answer · 2012-06-24T11:02:29.690

3

Probably the best you can do without nasty hacks is just to increase your input size by 1 :

<input type=number name=short value='1' min=0 max=9 size=2 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=4 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=6 maxlength=5>

It won't make a big difference in FF and Webkit, but will show up correctly in Opera

UPDATE Alternatively you can use the CSS hack to target opera only - http://jsfiddle.net/KmHwG/4/

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    input[name=short]  { width: 24px }
    input[name=medium] { width: 38px } 
    input[name=long]   { width: 52px } 
}

edited Jun 24 '12 at 11:02

answered Jun 24 '12 at 10:53

Zoltan Toth

46,981
12
120
134

The spin buttons are two digits wide for my case. This is a surprisingly good and simple solution. Let me wait a few more minutes to see if there are others. Thanks! – Question Overflow Jun 24 '12 at 10:59
Those names: short, medium and long are just examples. I have many number inputs, so that alternative is not viable. By the way it is `-o-`, not `-webkit-` for opera. – Question Overflow Jun 24 '12 at 11:06
I know about the `-o-`, but surprisingly this is the hack for Opera - http://stackoverflow.com/a/1280454/981134 I've tried the `-o-` but it didn't work for some strange reason – Zoltan Toth Jun 24 '12 at 11:10
Wow, that's a great link. Thanks! Maybe I can just use that to hide the spin buttons instead. Possible? – Question Overflow Jun 24 '12 at 11:14

score 0 · Answer 2 · answered Jun 24 '12 at 11:26

0

I think this could be an alternate solution:

noindex:-o-prefocus, input[type=number] {
 padding-right: 1.5em;
}

answered Jun 24 '12 at 11:26

Question Overflow

10,925
18
72
110

Cross-browser styling of input type number such that they are not longer than necessary

2 Answers2