设置size限制HTML Select下拉可见选项时出现截断，如何修复？

我有一个包含州列表的select下拉菜单，参考相关方案设置了以下代码，试图限制点击下拉后的可见选项数量为9个：

<div>
    <label asp-for="Venture.Location" class="form-label">Venture Location</label>
    <select asp-for="Venture.Location" class="form-input form-select" required onmousedown="this.size=9" onblur="this.size=0" onchange="this.size=0">
        <option disabled selected value="">select an option</option>
        @foreach(var location in Model.Locations)
        {
            <option value="location">@location</option>
        }
    </select>
</div>

但点击下拉菜单时，出现了选项截断的情况，实际显示的选项数量也超过了9个。如何确保通过size属性只显示正确数量的选项，消除截断问题？

1. 覆盖冲突的CSS样式 #

你的form-select类大概率自带了固定高度或overflow相关样式，直接覆盖了size属性的原生效果。可以给展开状态的select添加专属样式，强制控制高度：

/* 当select的size属性不为0时，强制适配9个选项的高度 */
select[size]:not([size="0"]) {
    height: auto !important; /* 移除固定高度限制 */
    max-height: calc(1.5em * 9 + 4px); /* 1.5em为单选项默认行高，9是目标显示数量，4px修正边框间距 */
    overflow-y: auto; /* 超出部分显示滚动条，避免截断 */
}

这样既保证只显示9个可见选项，超出的内容可以通过滚动查看，同时解决截断问题。

2. 优化JS事件触发逻辑 #

原生onmousedown事件在部分浏览器中可能重复触发，导致size属性异常。添加判断条件避免重复设置：

<select asp-for="Venture.Location" class="form-input form-select" required 
        onmousedown="if(this.size !== 9) this.size=9" 
        onblur="this.size=0" 
        onchange="this.size=0">
    <!-- 选项内容保持不变 -->
</select>

只有当size不等于9时才执行设置操作，避免重复触发导致的样式混乱。

3. 规避浏览器自定义渲染干扰 #

部分浏览器会对原生select下拉框做自定义渲染，忽略size属性。可以临时启用multiple属性配合size，同时保持单选行为：

<select asp-for="Venture.Location" class="form-input form-select" required
        onmousedown="this.size=9; this.setAttribute('multiple', '')" 
        onblur="this.size=0; this.removeAttribute('multiple')" 
        onchange="this.size=0; this.removeAttribute('multiple')">
    <!-- 选项内容保持不变 -->
</select>

配合之前的CSS样式，确保展开时仅显示9个选项，选中后自动取消多选状态，不影响原有单选逻辑。

内容的提问来源于stack exchange，提问作者Duke3e33