<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 元素