input number max attribute resizes field

Question

When adding a max value to an input number field in Chrome, it will re-size the field according to width of highest value.

It seems that I cannot control the re-sizing behavior.

<input type="number" name="" value="3500" placeholder="3500" min="500">
<br>
<input type="number" name="" value="3500" placeholder="3500" min="500" max="100000">
<br>
<input type="number" name="" value="3500" placeholder="3500" min="500" max="100000000">

Question: How can I make it behave like without max attribute or a normal text field.

PS: I cannot see any changes in the styles when switch the type. PPS: I must say that I already tried using -webkit-appearance: textfield; but Chrome was already using textfield by default.

Eda

PPPS: Without setting a width – Eda

Looks like there is no way to handle this problem. Happens. – Eda

Answer 1

Solution with percentage and div

Although it's been almost 6 years since this question was posted, just a few minutes ago I found myself in the same situation as the OP. The solution is to add a div that acts as a container for the input field. Then to the width of the input we add the rule for fill all the available space and at this point we can just change the size of the div wrapper as desired.

The first two inputs show what happens without div. The last two inputs have the same size despite the different 'max' value.

p{margin-bottom: 0;}

.wrapped{
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}
.inputWrapper{width: 30%;}

<p>Min 0, max 10</p>
<input type="number" min="0" max="10">

<p>Min 0, max 1000000</p>
<input type="number" min="0" max="1000000">

<div class="inputWrapper">
    <p>Wrapped: min 0, max 10</p>
    <input class="wrapped" type="number" min="0" max="10">

    <p>Wrapped: min 0, max 1000000</p>
    <input class="wrapped" type="number" min="0" max="1000000">
</div>

About the auto-resize of the input field

I honestly didn't read what the documentation says about this automatic resize and I was surprised when I noticed this unexpected and undesired behaviour. From the following simple tests we can see that the resize occurs only if both values 'min' and 'max' are set: the resize seems to be proportional only to the distance between max-0 instead of the distance max-min. Note that this is the default behavior without the proposed solution.

p{margin-bottom:0;}

<p>Min 0</p>
<input type="number" min="0">

<p>Min 100</p>
<input type="number" min="100">

<p>Max 0</p>
<input type="number" max="0">

<p>Max 100</p>
<input type="number" max="100">
<p> The previous input fields have the same width<p>

<p>Min 0, max 10</p>
<input type="number" min="0" max="10">

<p>Min 0, max 100</p>
<input type="number" min="0" max="100">

<p>Min 99, max 100</p>
<input type="number" min="99" max="100">

Osithe

Answer 2

Simply set a width for input.

input {
  width: 100px;
}

for example.

Whiffen

Setting the width property to 100% is actually not helpful as it will not create the same sizing behavior as a text field with no width property. A text field with no width will not expand to 100% of possible width. – Eda

You have to use a width which you like. my 100px is only an example. – Whiffen

Answer 3

This variant didn't work for me:

input {
  width: 100px;
}

But this worked:

input {
   min-width: 100px;
}

Daze