Baseline Widely available *This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Learn moreSee full compatibilityReport feedbackHTML

label {

font-family: sans-serif;

font-size: 1rem;

padding-right: 10px;

}

select {

font-size: 0.9rem;

padding: 2px 5px;

}

上述例子展示了 中的一个

每个

所关联的

(它的"表单拥有者")。其值必须是在同一文档中的 元素的id（如果没有设置这个属性， 元素与文档中任意位置的 元素相关联，而不仅仅是包含 元素中选中多个选项：

鼠标用户可以按住 Ctrl, Command, 或 Shift 键（取决于你的操作系统）然后点击不同选项以选择或取消选择。

警告：

以下所述的通过键盘选择多个不连续选项的方法目前只在 Firefox 有效（译者注：Chrome 81 也已支持）。另请注意：在 macOS 中， Ctrl + Up 和 Ctrl + Down 组合键会与系统默认用于任务管理和应用窗口的组合键冲突。所以如果要使用这些组合键，你需要关掉系统默认的组合键。

键盘用户可以这样选中多个连续的选项：

聚焦于 元素（例如使用

Tab

）。

按住

Ctrl

键，然后使用

Up

和

Down

方向键来改变聚焦的选项，聚焦的选项使用虚线轮廓高亮，和使用键盘聚焦链接的方式一样。

按下

Space

以选择或取消选择聚焦的选项。

应用 CSS 样式众所周知，元素的内部结构复杂，难以控制。如果你想完全控制，你应该考虑使用一个在修改表单部件样式方面拥有强大能力的库，或者尝试使用非语义元素和 JavaScript 来制作下拉菜单，再使用 WAI-ARIA 来提供语义。

有关样式

结果

使用多选的进阶选择下面的例子更加复杂，展示了可用在

你会看见：

可选中多个选项，因为我们使用了 multiple 属性。

size 属性导致一次只有 4 行能显示；你可以滚动查看所有选项。

我们在其中使用了 元素来将选项分成不同组别。这单纯是视觉上的分组，一般来说，分组由加粗的组名和缩进的选项组成。

"Hamster"选项使用了disabled 属性，因此不能被选中。

技术概览

内容分类

Flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element

允许的内容

Zero or more elements.

标签省略

不允许，开始标签和结束标签都不能省略。

允许的父元素

Any element that accepts phrasing content.

Implicit ARIA role

combobox with no multiple attribute and no size attribute greater than 1, otherwise listbox

Permitted ARIA roles

menu with no multiple attribute and no size attribute greater than 1, otherwise no role permitted

DOM 接口

HTMLSelectElement

规范SpecificationHTML # the-select-element浏览器兼容性参见

由