<selectedcontent>: 选定选项显示元素

属性

此元素包含全局属性。

描述

您将 <selectedcontent> 元素用作 <button> 元素的唯一子元素，而该 <button> 元素必须是 <select> 元素的第一个子元素。任何 <option> 元素（<select> 的其他唯一有效子元素）必须出现在 <button> 和嵌套的 <selectedcontent> 对之后。

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option></option>
  ...
</select>

<selectedcontent> 的后台工作原理

<selectedcontent> 元素包含当前选定 <option> 元素内容的一个克隆。浏览器使用 cloneNode() 来渲染此克隆。当选定的 <option> 更改时（例如，在 change 事件期间），<selectedcontent> 的内容将被新选定 <option> 的克隆替换。了解此行为很重要，尤其是在处理动态内容时。

<selectedcontent> 的惰性

默认情况下，<select> 元素中的任何 <button> 都处于 惰性 (inert) 状态。因此，该按钮内的所有内容（包括 <selectedcontent>）也处于惰性状态。这意味着用户无法与 <selectedcontent> 内的内容进行交互或聚焦。

使用 CSS 为选定选项的内容设置样式

您可以定位当前选定的 <option> 元素的内容，并设置其在 select 按钮中显示的方式。设置按钮的样式不会影响克隆的 <option> 内容的样式。这允许您自定义选定选项在按钮中的外观，而与它们在下拉列表中的外观分开。

例如，您的 <option> 元素可能包含图标、图像甚至视频，它们在下拉列表中可以很好地渲染，但可能导致 select <button> 变大、看起来杂乱并影响周围的布局。通过定位 <selectedcontent> 中的内容，您可以隐藏按钮中的元素（如图像），而不会影响它们在下拉列表中的显示方式，如下面的代码片段所示：

selectedcontent img {
  display: none;
}

示例

您可以在我们的 可自定义 select 元素指南中找到包含 <selectedcontent> 元素的完整示例。

技术摘要

规范

浏览器兼容性

另见

• <select> 元素
• <option> 元素
• <optgroup> 元素
• 可定制的 select 元素