From 5344c6183f36af9c2821ee70051b7ba5eaac5c23 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Tue, 17 Sep 2024 11:48:52 -0700
Subject: [PATCH] [css-pseudo-4] Define ::picker() (#10865)

This was discussed here: https://github.com/w3c/csswg-drafts/issues/10440
---
 css-pseudo-4/Overview.bs | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
index d94c56cc09e..6aece116827 100644
--- a/css-pseudo-4/Overview.bs
+++ b/css-pseudo-4/Overview.bs
@@ -1595,6 +1595,46 @@ details[open]::details-content {
 }</pre>
   </div>
 
+<h3 id="picker-pseudo">
+Styling form control pickers: the ''::picker()'' pseudo-element</h3>
+
+  The <dfn>::picker()</dfn> pseudo-element targets the popup picker of form
+  control elements which have popup pickers, such as the <{select}> element. It
+  is a [=part-like pseudo-element=].
+
+  <pre class=prod>
+    ::picker() == ::picker( <<ident>>+ )
+  </pre>
+
+  Note: Once all of the controls that might support picker styling have it,
+  then we might add a (no-argument) ''::picker'' pseudo-element as well.
+
+  The ''::picker()'' pseudo-element only matches when the <a>originating
+  element</a> supports <a>base appearance</a> and has a popup picker. The
+  specified <<ident>> must also match the <dfn>unique picker name</dfn> of the
+  <a>originating element</a>. For example, the <a>unique picker name</a> for
+  the <{select}> element is "select".
+
+  Since it is a [=part-like pseudo-element=], There is no restriction on which
+  properties apply to the ''::picker()'' pseudo-element.
+
+  In order for the ''::picker()'' pseudo-element to be rendered, it and its
+  <a>originating element</a> must be rendered with <a>base appearance</a> by
+  applying ''appearance: base'' to both of them.
+
+  <pre class="example">
+&lt;style>
+  select, select::picker(select) {
+    appearance: base;
+  }
+  select::picker(select) {
+    border: 5px solid red;
+    background-color: blue;
+  }
+&lt;/style>
+  </pre>
+
+
 <h2 id="interactions">
 Overlapping Pseudo-element Interactions</h2>