为什么我用于 HTML 输入的 Size 属性不影响其宽度？

Question

我知道了 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>

...并且，尽管设置为 4 号，但输入数字非常宽：

...并且它不会随着给定“大小”的值的变化而改变一种方式或另一种方式

同样的技巧（添加小尺寸值）效果很好here。

我做错了什么？

Answer 1

inputsize的定义来自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.

因此，它不适用于 type="number"

的 input

Answer 2

您没有看到变化的原因是您必须设置最小值和最大值。如果你不设置min和max的值，这个输入框会把它的宽度设置成能看到最大的限制数。 size 属性将帮助您根据上述相同的概念设置输入框的宽度，即不丢失输入框中值的视口。但是，当步进函数与输入类型编号一起使用时，将不支持它。

<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 3

正如“95faf8e76605e973”（显然是威尔士人或芬兰人）所说，你无法从那里到达那里。

这个 CSS 有效，但是：

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

现在我的输入数字小部件如下所示：

为什么我用于 HTML 输入的 Size 属性不影响其宽度？

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

html

html-input

twitter-bootstrap