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

【问题标题】：Why is the Size attribute I'm using for an HTML Input not affecting its width?为什么我用于 HTML 输入的 Size 属性不影响其宽度？
【发布时间】：2021-01-14 15:47:24
【问题描述】：

我有这个 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。

我做错了什么？

【问题讨论】：

标签： html twitter-bootstrap html-input

【解决方案1】：

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

不过，这个 CSS 可以工作：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

inputsize 的定义来自MDN Web Docs：

仅对电子邮件、密码、电话和文本输入类型有效。指定显示了多少输入。基本上产生与使用一些专业设置 CSS 宽度属性。实际单位该值取决于输入类型。对于密码和文本，它是默认值为 20 的字符数（或 em 单位），对于其他，它是像素。 CSS 宽度优先于 size 属性。

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

【讨论】：