Setting min and max on input removes spacing?

Question

For some reason, when I set min and max values on an input like so:

<p>The placeholder of the second input is cut off (i.e. input is collapsed) when the input is assigned a min and max value?</p>
<input type="number" placeholder="This is my placeholder.">
<input type="number" placeholder="This is my placeholder." min="1" max="15">

The input collapses into a small space:

Example

I'd like to prevent this from happening without having to set a "width" value on the input. Is this possible?

Thanks!

@ShivCK apologies, was a typo. fixed. the issue still occurs, however — Aaron Marsden, Mar 08 '22 at 20:13
Does this answer your question? [input number max attribute resizes field](https://stackoverflow.com/questions/33283901/input-number-max-attribute-resizes-field) — Joy Dey, Mar 08 '22 at 20:18
No, it's not possible. You'll have to set a width to the input to fit your placeholder text using `input[type=number]`. — Kameron, Mar 08 '22 at 20:22
It seems not quite right to have a bit of text as 'placeholder' when the user is expected to input a 1 or 2 digit number. Would it be helpful to the user to put the 'placeholder' as a label instead? — A Haworth, Mar 08 '22 at 20:23

Alexander Nied · Answer 1 · 2022-03-08T20:51:03.233

The browser is rendering the <input type="number" /> to the size that will fit its maximum content:

<label for="99">Max is 99</label>
<input name="99" id="99" type="number" min="1" max="99">
<br/>
<label for="99">Max is 999</label>
<input name="99" id="99" type="number" min="1" max="999">
<br/>
<label for="99">Max is 9999</label>
<input name="99" id="99" type="number" min="1" max="9999">
<br/>
<label for="99">Max is 99999</label>
<input name="99" id="99" type="number" min="1" max="99999">
<br/>
<label for="99">Max is 999999</label>
<input name="99" id="99" type="number" min="1" max="999999">

If you want to enter some placeholder value that exceeds that content, you'll have to resize it with CSS; the size and width attributes are not valid for the "number" type.

Also, as A Haworth points out in the comments, the usefulness of the placeholder here is rather limited-- in fact, I would challenge that perhaps placeholders are of rather limited benefit generally. Consider that if this text is important enough to be on the page, it is important enough to be displayed as part of the label, where it is always visible and of sufficient contrast that it can be easily seen and read.

Setting min and max on input removes spacing?

1 Answers1