::picker-icon

語法

::picker-icon {
  /* ... */
}

描述

::picker-icon 偽元素定位表單控制元件的選取器圖示，即控制元件按鈕上顯示的圖示。只有當原始元素具有選取器，並且透過 appearance 屬性的 base-select 值設定了基本外觀時，才能對其進行定位。其生成的框出現在由 ::after 偽元素生成的任何框之後，圖示在預設瀏覽器樣式表中指定；您可以使用 content 屬性對其進行自定義。

::picker-icon 選擇器可用於選擇可定製的 select 元素行末側向下指向的箭頭。這很有用，例如，如果您想自定義圖示的顏色或大小，使用不同的圖示（使用 content 或 SVG），或者在選取器開啟和關閉時為其設定動畫。

選擇可定製的 <select> 選取器圖示是 ::picker-icon 當前唯一的用例，但未來可能會新增更多用例。

示例

為選取器圖示新增動畫

要啟用可定製的 select 功能，<select> 元素及其選取器都需要將 appearance 值設定為 base-select

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

然後，例如，您可以定位 ::picker-icon 併為其設定自定義的 color 和 transition，以便其 rotate 屬性的變化能夠平滑地進行動畫處理

select::picker-icon {
  color: #999999;
  transition: 0.4s rotate;
}

在下一個規則中，::picker-icon 與 :open 偽類結合使用——它只在選取器開啟時定點陣圖標——當 <select> 開啟時，將其過渡到 rotate 值 180deg。

select:open::picker-icon {
  rotate: 180deg;
}

有關使用此程式碼的完整示例以及即時示例渲染，請參閱樣式化選取器圖示。

規範

瀏覽器相容性

另見

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