HTML 属性：size
size 属性定义了 <input> 元素的宽度以及 <select> 元素的高度。对于 input 元素，它定义了用户代理允许用户在编辑值时看到的字符数。对于 select 元素，它定义了应向用户显示的选项数量。此值必须是一个大于零的有效非负整数。
如果没有指定 size，或者指定了无效值，则该输入没有声明尺寸，并且表单控件将具有用户代理的默认宽度。如果 CSS 使用影响宽度的属性定位该元素，则 CSS 具有优先权。
size 属性对约束验证没有影响。
试一试
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" size="10" />
<label for="lastName">Last Name:</label>
<input id="lastName" name="lastName" type="text" size="20" />
<label for="fruit">Favorite fruit:</label>
<select id="fruit" name="fruit" size="2">
<option>Orange</option>
<option>Banana</option>
<option>Apple</option>
</select>
label {
display: block;
margin-top: 1rem;
}
示例
通过在某些输入类型上添加 size，可以控制输入的宽度。在 select 上添加 size 会改变高度，定义在折叠状态下可见的选项数量。
html
<label for="fruit">Enter a fruit</label>
<input type="text" size="15" id="fruit" />
<label for="vegetable">Enter a vegetable</label>
<input type="text" id="vegetable" />
<select name="fruits" size="5">
<option>banana</option>
<option>cherry</option>
<option>strawberry</option>
<option>durian</option>
<option>blueberry</option>
</select>
<select name="vegetables" size="5">
<option>carrot</option>
<option>cucumber</option>
<option>cauliflower</option>
<option>celery</option>
<option>collard greens</option>
</select>
规范
| 规范 |
|---|
| HTML # attr-select-size |
| HTML # attr-input-size |
浏览器兼容性
html.elements.select.size
加载中…
html.elements.input.size
加载中…