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