::picker()

語法

::picker(<ident>) {
  /* ... */
}

引數

<ident>

一個字串，表示您想要定位其選擇器的元素。以下值可用：

select

可定製 select 元素的下拉選擇器。

描述

::picker() 偽元素目標是表單控制元件的選擇器部分，即當您按下控制元件按鈕時出現的彈出部分，允許您進行選擇。它僅在原始元素具有選擇器並透過 appearance 屬性的 base-select 值設定了基本外觀時才可用作目標。

::picker(select) 選擇器目標是可定製 <select> 元素的所有後代，除了第一個 <button> 子元素；這些後代被瀏覽器分組並渲染為選擇器。第一個 <button> 子元素代表按下時開啟選擇器的控制元件按鈕。

這允許您將所有選擇器內容作為單個實體進行定位，例如，如果您想自定義其邊框、在它出現和消失時對其進行動畫處理，或者將其定位在與預設位置不同的位置。我們的可定製 select 元素指南展示了許多 ::picker(select) 用法的示例。

選擇器彈出行為

<select> 元素和選擇器之間自動分配了一個隱式的呼叫者/彈出關係，如 Popover API 所指定。有關彈出行為的更多詳細資訊，請參閱使用 Popover API，有關隱式彈出關聯所允許的典型用例，請參閱使用彈出狀態動畫選擇器下拉選單。

選擇器錨點定位

上述隱式呼叫者/彈出關係的另一個副作用是 <select> 元素和選擇器還具有隱式錨點引用，這意味著選擇器透過 CSS 錨點定位自動與 select 相關聯。這有幾個優點，最顯著的是：

• 瀏覽器預設樣式將選擇器相對於按鈕（錨點）定位，您可以按照相對於其錨點定位元素中的說明自定義此位置。作為參考，相關的預設樣式如下：

  css

  inset: auto;
  margin: 0;
  min-inline-size: anchor-size(self-inline);
  min-block-size: 1lh;
  /* Go to the edge of the viewport, and add scrollbars if needed. */
  max-block-size: stretch;
  overflow: auto;
  /* Below and span-right, by default. */
  position-area: block-end span-inline-end;
  

• 瀏覽器預設樣式還定義了一些位置嘗試回退，如果選擇器有溢位視口的風險，這些回退會重新定位選擇器。位置嘗試回退在溢位的回退選項和條件隱藏指南中有所解釋。作為參考，相關的預設回退樣式如下：

  css

  position-try-order: most-block-size;
  position-try-fallbacks:
    /* First try above and span-right, */
    /* then below but span-left, */
    /* then above and span-left. */
    block-start span-inline-end,
    block-end span-inline-start,
    block-start span-inline-start;
  

示例

基本自定義選擇用法

要選擇自定義選擇功能和最小瀏覽器基本樣式（並刪除作業系統提供的樣式），<select> 元素及其選擇器都需要將其 appearance 值設定為 base-select：

select,
::picker(select) {
  appearance: base-select;
}

然後，您可以，例如，移除選擇器的預設黑色border：

::picker(select) {
  border: none;
}

規範

瀏覽器相容性

另見

• <select>、<option>、<optgroup>、<label>、<button>、<selectedcontent>
• appearance
• ::picker-icon, ::checkmark
• :open、:checked
• 可定製的 select 元素