HTML5 本身不提供传统桌面应用中“始终可见、可多选”的原生 listbox 控件，但可通过 配合 size 属性实现功能等效、零依赖的解决方案——无需第三方库，完全基于标准 HTML5 语义化标签。

html5 本身不提供传统桌面应用中“始终可见、可多选”的原生 listbox 控件，但可通过 `` 配合 `size` 属性实现功能等效、零依赖的解决方案——无需第三方库，完全基于标准 html5 语义化标签。

在 Web 开发中，“listbox”一词常被误认为仅指下拉式 ，但实际上 HTML5 早已支持常显式、多选、滚动可见的原生列表框——其核心正是 元素的 multiple 与 size 属性组合。

✅ 正确用法：创建真正的“Windows 风格 listbox”

只需如下 HTML 即可实现：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<select multiple size="6" name="favorite-fruits"><option value="apple">Apple</option>
<option value="banana" selected>Banana</option>
<option value="cherry">Cherry</option>
<option value="dragonfruit">Dragon Fruit</option>
<option value="elderberry">Elderberry</option>
<option value="fig">Fig</option>
<option value="grape">Grape</option></select>

• multiple：启用多选（用户可按 Ctrl/Cmd + 点击，或 Shift + 连续点击）；
• size="6"：强制显示 6 行可见选项，超出部分自动出现垂直滚动条——这正是 WinForms ListBox 的行为本质；
• 无 size 时默认为单行下拉；设 size="1" 则退化为下拉；size ≥ 2 才呈现常显列表形态；
• 所有浏览器（Chrome、Firefox、Safari、Edge）均原生支持，无需 polyfill。

⚠️ 注意事项与最佳实践

• 无障碍友好： 天然支持键盘操作（Tab 进入、Arrow 导航、Space 选中、Ctrl+A 全选），且兼容屏幕阅读器，比自定义 div+JS 方案更可靠；
• 样式控制有限但可行：虽不能像
  那样自由定制每一项的布局，但可通过 CSS 定制整体外观：

  select[multiple] {
    font-family: system-ui, -apple-system, sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px;
    background-color: #fff;
  }
  select[multiple] option:checked {
    background-color: #007bff;
    color: white;
  }

• 避免常见误区：
  • ❌ 不要用
  • ❌ 不要滥用
    + JavaScript 模拟 —— 增加维护成本、破坏语义、损害可访问性；
  • ✅ 优先使用原生 —— 语义正确、兼容性好、性能轻量、符合 WCAG 标准。

  ? 总结

  HTML5 并未缺失 listbox 功能，而是将其内建于 的 multiple 和 size 属性中。它不是“隐藏特性”，而是被长期低估的标准能力。对于 Cameron 所期待的“WinForms 风格常显多选列表”，这一原生方案完全满足：无需依赖、开箱即用、语义清晰、跨平台一致。真正需要的，只是对 HTML 规范中这一经典组合的重新发现与正确使用。