22Title : CSS Form Styling Module Level 1
33Shortname : css-forms
44Level : 1
5- Status : DREAM
5+ Group : csswg
6+ Status : UD
67Work Status : Exploring
78ED : https://drafts.csswg.org/css-forms/
8- No Editor : true
9+ Editor : Tim Nguyen, w3cid 137443, Apple Inc. https://apple.com/, ntim@apple.com
910Abstract : 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.
1112Warning : not ready
1213</pre>
1314
14- New Pseudo-Elements {#pseudos}
15- ==============================
15+ # New Pseudo-Elements # {#pseudos}
1616
1717This 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</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
8987This section sketches a few proposals for solving the form styling problem.
9088
91- Prototypes {#prototypes}
92- ------------------------
89+ ### Prototypes ### {#prototypes}
9390
9491This idea, originally suggested by fantasai,
9592is 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
177173This idea, originally sketched by Florian and Tab,
178174is to define an abstract set of colors
@@ -198,15 +194,13 @@ or automatically setting text colors to white/black as appropriate.
198194
199195There'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
204199Issue: <a href="http://blog.teamtreehouse.com/use-meter-progress-elements"><progress> and <meter> styling</a>
205200
206201Issue: Insert <select> and <datalist> styling proposal and/or whiteboard photo.
207202
208- Select/Datalist Dropdown {#select-dropdown}
209- ----------------------------------
203+ ### Select/Datalist Dropdown ### {#select-dropdown}
210204
2112051. Only allow styling if both 'color!!property' and 'background' are set.
2122062. 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-
232224This section catalogues as many input UI examples as we can screenshot,
233225especially 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