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 { } +

+Styling form control pickers: the ''::picker()'' pseudo-element

+ + The ::picker() 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=]. + +
+    ::picker() == ::picker( <>+ )
+  
+ + 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 originating + element supports base appearance and has a popup picker. The + specified <> must also match the unique picker name of the + originating element. For example, the unique picker name 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 + originating element must be rendered with base appearance by + applying ''appearance: base'' to both of them. + +
+<style>
+  select, select::picker(select) {
+    appearance: base;
+  }
+  select::picker(select) {
+    border: 5px solid red;
+    background-color: blue;
+  }
+</style>
+  
+ +

Overlapping Pseudo-element Interactions