Search code examples
htmltwitter-bootstraphtml-input

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

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:

enter image description here

...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?

Solution

  • Definition of input size From MDN Web Docs:

    Valid for email, password, tel, and text input types only. Specifies how much of the input is shown. Basically creates same result as setting CSS width property with a few specialities. The actual unit of the value depends on the input type. For password and text, it is a number of characters (or em units) with a default value of 20, and for others, it is pixels. CSS width takes precedence over size attribute.

    Therefore, it will not work for input of type="number"