Skip to content

Commit aaf3fe2

Browse files
committed
[css-forms-1] Add myself as editor and move old explorations to appendix
1 parent 9655429 commit aaf3fe2

File tree

1 file changed

+17
-27
lines changed

1 file changed

+17
-27
lines changed

css-forms-1/Overview.bs

+17-27
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,21 @@
22
Title: CSS Form Styling Module Level 1
33
Shortname: css-forms
44
Level: 1
5-
Status: DREAM
5+
Group: csswg
6+
Status: UD
67
Work Status: Exploring
78
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
910
Abstract: This document is currently a loosely-structured set of ideas and inspiration for CSS form styling.
1011
It is not an implementable standard. Do not look at this as anything but a collection of ideas.
1112
Warning: not ready
1213
</pre>
1314

14-
New Pseudo-Elements {#pseudos}
15-
==============================
15+
# New Pseudo-Elements # {#pseudos}
1616

1717
This section defines some pseudo-elements for styling parts of form elements.
1818

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}
2120

2221
The <dfn>::picker()</dfn> pseudo-element targets the popup picker of form
2322
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>
5554
&lt;/style>
5655
</pre>
5756

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}
6058

6159
The ''::picker-icon'' pseudo-element is only generated when the
6260
<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>
6866
<a>originating element</a>, after any boxes generated by the ''::after''
6967
pseudo-element, with content as specified by 'content'.
7068

71-
<h3 id="checkmark">
72-
Checkmark icon: the ''::checkmark'' pseudo-element</h3>
69+
## Checkmark icon: the ''::checkmark'' pseudo-element ## {#checkmark-element}
7370

7471
The '::checkmark'' pseudo-element is only generated when the <a>originating
7572
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>
8380
pseudo-element, with content as specified by 'content'.
8481

8582

86-
Basic Styling Proposals {#ideas}
87-
================================
83+
<h2 class="no-num non-normative" id="changes">Appendix: Explorations</h2>
84+
85+
## Basic Styling Proposals ## {#ideas}
8886

8987
This section sketches a few proposals for solving the form styling problem.
9088

91-
Prototypes {#prototypes}
92-
------------------------
89+
### Prototypes ### {#prototypes}
9390

9491
This idea, originally suggested by fantasai,
9592
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.
171168
</div>
172169

173170

174-
Inverse System Colors {#inverse-system}
175-
---------------------------------------
171+
### Inverse System Colors ### {#inverse-system}
176172

177173
This idea, originally sketched by Florian and Tab,
178174
is to define an abstract set of colors
@@ -198,15 +194,13 @@ or automatically setting text colors to white/black as appropriate.
198194

199195
There's no guarantee that the input UIs will use the colors in the *same way* that the rest of the page does, though.
200196

201-
Miscellaneous Control-Specific Suggestions {#misc}
202-
==================================================
197+
## Miscellaneous Control-Specific Suggestions ## {#misc}
203198

204199
Issue: <a href="http://blog.teamtreehouse.com/use-meter-progress-elements">&lt;progress> and &lt;meter> styling</a>
205200

206201
Issue: Insert &lt;select> and &lt;datalist> styling proposal and/or whiteboard photo.
207202

208-
Select/Datalist Dropdown {#select-dropdown}
209-
----------------------------------
203+
### Select/Datalist Dropdown ### {#select-dropdown}
210204

211205
1. Only allow styling if both 'color!!property' and 'background' are set.
212206
2. Option container:
@@ -224,16 +218,13 @@ Select/Datalist Dropdown {#select-dropdown}
224218
All options are contain:paint and BFCs.
225219

226220

221+
## Input UI Examples ## {#examples}
227222

228223

229-
Input UI Examples {#examples}
230-
=============================
231-
232224
This section catalogues as many input UI examples as we can screenshot,
233225
especially on mobile devices where they're a bit "weirder".
234226

235-
Time Pickers {#time-examples}
236-
-----------------------------
227+
### Time Pickers ### {#time-examples}
237228

238229
<figure>
239230
<img src="images/time01.png">
@@ -250,8 +241,7 @@ Time Pickers {#time-examples}
250241
<figcaption>Android time picker 2</figcaption>
251242
</figure>
252243

253-
Date Pickers {#date-examples}
254-
-----------------------------
244+
### Date Pickers ### {#date-examples}
255245

256246
<figure>
257247
<img src="images/date01.png">

0 commit comments

Comments
 (0)