2
2
Title : CSS Form Styling Module Level 1
3
3
Shortname : css-forms
4
4
Level : 1
5
- Status : DREAM
5
+ Group : csswg
6
+ Status : UD
6
7
Work Status : Exploring
7
8
ED : https://drafts.csswg.org/css-forms/
8
- No Editor : true
9
+ Editor : Tim Nguyen, w3cid 137443, Apple Inc. https://apple.com/, ntim@apple.com
9
10
Abstract : This document is currently a loosely-structured set of ideas and inspiration for CSS form styling.
10
11
It is not an implementable standard. Do not look at this as anything but a collection of ideas.
11
12
Warning : not ready
12
13
</pre>
13
14
14
- New Pseudo-Elements {#pseudos}
15
- ==============================
15
+ # New Pseudo-Elements # {#pseudos}
16
16
17
17
This section defines some pseudo-elements for styling parts of form elements.
18
18
19
- <h3 id="picker-pseudo">
20
- Styling form control pickers: the ''::picker()'' pseudo-element</h3>
19
+ ## Styling form control pickers: the ''::picker()'' pseudo-element ## {#picker-pseudo-element}
21
20
22
21
The <dfn>::picker()</dfn> pseudo-element targets the popup picker of form
23
22
control elements which have popup pickers, such as the <{select}> element. It
@@ -55,8 +54,7 @@ Styling form control pickers: the ''::picker()'' pseudo-element</h3>
55
54
</style>
56
55
</pre>
57
56
58
- <h3 id="picker-icon">
59
- Picker opener icon: the ''::picker-icon'' pseudo-element</h3>
57
+ ## Picker opener icon: the ''::picker-icon'' pseudo-element ## {#picker-icon-pseudo-element}
60
58
61
59
The ''::picker-icon'' pseudo-element is only generated when the
62
60
<a>originating element</a> has <a>base appearance</a> and opens a picker.
@@ -68,8 +66,7 @@ Picker opener icon: the ''::picker-icon'' pseudo-element</h3>
68
66
<a>originating element</a> , after any boxes generated by the ''::after''
69
67
pseudo-element, with content as specified by 'content' .
70
68
71
- <h3 id="checkmark">
72
- Checkmark icon: the ''::checkmark'' pseudo-element</h3>
69
+ ## Checkmark icon: the ''::checkmark'' pseudo-element ## {#checkmark-element}
73
70
74
71
The '::checkmark' ' pseudo-element is only generated when the <a>originating
75
72
element</a> supports the <a>:checked</a> pseudo-class and either has <a>base
@@ -83,13 +80,13 @@ Checkmark icon: the ''::checkmark'' pseudo-element</h3>
83
80
pseudo-element, with content as specified by 'content' .
84
81
85
82
86
- Basic Styling Proposals {#ideas}
87
- ================================
83
+ <h2 class="no-num non-normative" id="changes">Appendix: Explorations</h2>
84
+
85
+ ## Basic Styling Proposals ## {#ideas}
88
86
89
87
This section sketches a few proposals for solving the form styling problem.
90
88
91
- Prototypes {#prototypes}
92
- ------------------------
89
+ ### Prototypes ### {#prototypes}
93
90
94
91
This idea, originally suggested by fantasai,
95
92
is that we can style a handful of "prototype" elements.
@@ -171,8 +168,7 @@ At the limit, things like internal padding, border-radius, etc might be used.
171
168
</div>
172
169
173
170
174
- Inverse System Colors {#inverse-system}
175
- ---------------------------------------
171
+ ### Inverse System Colors ### {#inverse-system}
176
172
177
173
This idea, originally sketched by Florian and Tab,
178
174
is to define an abstract set of colors
@@ -198,15 +194,13 @@ or automatically setting text colors to white/black as appropriate.
198
194
199
195
There's no guarantee that the input UIs will use the colors in the *same way* that the rest of the page does, though.
200
196
201
- Miscellaneous Control-Specific Suggestions {#misc}
202
- ==================================================
197
+ ## Miscellaneous Control-Specific Suggestions ## {#misc}
203
198
204
199
Issue: <a href="http://blog.teamtreehouse.com/use-meter-progress-elements"><progress> and <meter> styling</a>
205
200
206
201
Issue: Insert <select> and <datalist> styling proposal and/or whiteboard photo.
207
202
208
- Select/Datalist Dropdown {#select-dropdown}
209
- ----------------------------------
203
+ ### Select/Datalist Dropdown ### {#select-dropdown}
210
204
211
205
1. Only allow styling if both 'color!!property' and 'background' are set.
212
206
2. Option container:
@@ -224,16 +218,13 @@ Select/Datalist Dropdown {#select-dropdown}
224
218
All options are contain:paint and BFCs.
225
219
226
220
221
+ ## Input UI Examples ## {#examples}
227
222
228
223
229
- Input UI Examples {#examples}
230
- =============================
231
-
232
224
This section catalogues as many input UI examples as we can screenshot,
233
225
especially on mobile devices where they're a bit "weirder".
234
226
235
- Time Pickers {#time-examples}
236
- -----------------------------
227
+ ### Time Pickers ### {#time-examples}
237
228
238
229
<figure>
239
230
<img src="images/time01.png">
@@ -250,8 +241,7 @@ Time Pickers {#time-examples}
250
241
<figcaption> Android time picker 2</figcaption>
251
242
</figure>
252
243
253
- Date Pickers {#date-examples}
254
- -----------------------------
244
+ ### Date Pickers ### {#date-examples}
255
245
256
246
<figure>
257
247
<img src="images/date01.png">
0 commit comments