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