@@ -11,6 +11,51 @@ Abstract: This document is currently a loosely-structured set of ideas and inspi
1111Warning : not ready
1212</pre>
1313
14+ New Pseudo-Elements {#pseudos}
15+ ==============================
16+
17+ This section defines some pseudo-elements for styling parts of form elements.
18+
19+ <h3 id="picker-pseudo">
20+ Styling form control pickers: the ''::picker()'' pseudo-element</h3>
21+
22+ The <dfn>::picker()</dfn> pseudo-element targets the popup picker of form
23+ control elements which have popup pickers, such as the <{select}> element. It
24+ is an [=element-backed pseudo-element=] .
25+
26+ <pre class=prod>
27+ ::picker() = ::picker( <<ident>> + )
28+ </pre>
29+
30+ Note: Once all of the controls that might support picker styling have it,
31+ then we might add a (no-argument) ''::picker'' pseudo-element as well.
32+
33+ The ''::picker()'' pseudo-element only matches when the <a>originating
34+ element</a> supports <a>base appearance</a> and has a popup picker. The
35+ specified <<ident>> must also match the <dfn>unique picker name</dfn> of the
36+ <a>originating element</a> . For example, the <a>unique picker name</a> for
37+ the <{select}> element is "select".
38+
39+ Since it is an [=element-backed pseudo-element=] , There is no restriction on which
40+ properties apply to the ''::picker()'' pseudo-element.
41+
42+ In order for the ''::picker()'' pseudo-element to be rendered, it and its
43+ <a>originating element</a> must be rendered with <a>base appearance</a> by
44+ applying ''appearance: base'' to both of them.
45+
46+ <pre class="example">
47+ <style>
48+ select, select::picker(select) {
49+ appearance: base;
50+ }
51+ select::picker(select) {
52+ border: 5px solid red;
53+ background-color: blue;
54+ }
55+ </style>
56+ </pre>
57+
58+
1459Basic Styling Proposals {#ideas}
1560================================
1661
0 commit comments