@@ -11,6 +11,51 @@ Abstract: This document is currently a loosely-structured set of ideas and inspi
11
11
Warning : not ready
12
12
</pre>
13
13
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
+
14
59
Basic Styling Proposals {#ideas}
15
60
================================
16
61
0 commit comments