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:
I'd like to prevent this from happening without having to set a "width" value on the input. Is this possible?
Thanks!
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.