HTML5 本身不提供传统桌面应用中“始终可见、多选、带滚动条”的原生 listbox 控件，但可通过 配合 size 属性实现语义正确、无需第三方库的常显列表框效果。

html5 本身不提供传统桌面应用中“始终可见、多选、带滚动条”的原生 listbox 控件，但可通过 `` 配合 `size` 属性实现语义正确、无需第三方库的常显列表框效果。

在 Web 开发中，当开发者需要模拟 Windows Forms 或桌面应用中的 常显列表框（ListBox）——即列表项始终可见、支持多选、自带垂直滚动条、无需点击展开——而非默认的下拉式 ，许多人误以为 HTML5 缺失该能力。实际上，标准 HTML 已完全支持这一需求，只需正确使用原生 元素的两个关键属性：multiple 和 size。

✅ 正确用法：

• multiple：启用多选模式（用户可按 Ctrl/Cmd + 单击，或 Shift + 连续单击进行范围选择）；
• size：指定可见行数（如 size="5" 表示始终显示 5 行选项，超出部分自动出现滚动条）；
• 二者结合即构成语义等价于传统 ListBox 的原生控件，无需 JavaScript、无外部依赖、无障碍友好（天然支持键盘导航与屏幕阅读器）。

示例代码：

<label for="fruit-list">请选择水果（可多选）：</label>
<select id="fruit-list" name="fruits" multiple size="6">
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
  <option value="strawberry">草莓</option>
  <option value="mango">芒果</option>
  <option value="kiwi">猕猴桃</option>
</select>

✅ 效果说明：该 始终显示 6 行选项（含滚动条），支持鼠标/键盘多选，提交时以数组形式传递多个 value（如 fruits[]=banana&fruits[]=grape），后端可直接解析。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

⚠️ 注意事项与最佳实践

• size 值建议 ≥ 2：若设为 size="1"，即使有 multiple，浏览器仍可能渲染为下拉式（行为不一致），应避免；
• 禁用下拉箭头（可选）：部分浏览器（如 Chrome）会在 multiple + size 下保留小箭头。可通过 CSS 隐藏（不影响功能）：

  select[multiple] {
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
    appearance: listbox;
  }

• 样式定制限制：原生 的样式跨浏览器兼容性有限（尤其滚动条、选项高亮），如需深度定制外观，推荐用
  +
  模拟（牺牲部分语义性与无障碍），但对于功能优先、合规要求高的场景，原生方案仍是首选；
• 无障碍保障：原生 自动支持 aria-* 属性、键盘操作（Tab 进入、Space 切换选中、Arrow 键导航），无需额外开发即可满足 WCAG 2.1 AA 标准。

✅ 总结

HTML5 并未缺失“常显列表框”能力——它早已内置于 标签中，只需组合 multiple 与 size 属性即可精准复现桌面 ListBox 的核心交互与语义。这不仅是可行方案，更是符合标准、轻量、可访问、零依赖的最佳实践。与其引入第三方库增加复杂度与维护成本，不如善用浏览器原生能力，让 HTML 回归简洁与可靠。