Why is the Size attribute I'm using for an HTML Input not affecting its width?

Question

I've got this html:

<h5>
Select IMDB Rating
</h5>
<input type="radio" id="rdbtnAllIMDB"</input>
<label for="rdbtnAllIMDBA">All</label>
<p><input type="radio" id="rdbtnGOE" checked="checked"</input>
<label for="rdbtnGOE"> >= </label>
<input type=number step=0.1 value="7.5" size="4"</input></p>

...and, altough set to size 4, the input number is quite wide:

...and it doesn't change one way or the other with changes to the value given "size"

The same trick (adding a small size value) works just fine here.

What am I doing wrong?

Answer 1

The reason you are not seeing changes is that you have to set the min and max value. If you don't set the value of min and max, this input box will set its width in such a way that the highest limit number can be seen completely. The size attribute will help you set the width of the input box based on the same concept described above of not loosing the view port of the value in input boxes. But, it won't be supported when the step function is used with input type number.

<h5>
Select IMDB Rating
</h5>
<input type="radio" id="rdbtnAllIMDB"</input>
<label for="rdbtnAllIMDBA">All</label>
<p><input type="radio" id="rdbtnGOE" checked="checked"</input>
<label for="rdbtnGOE"> >= </label>
<input type=number step=0.1 value="7.5" min="0" max="10"</input></p>

Answer 2

As "95faf8e76605e973" (apparently a Welshman or a Finn) said, you can't get there from there.

This CSS works, though:

input[type=number] {
  width: 64px;
}

Now my input number widgets look like so: