canmove, Confirmed users
2,675
edits
Tantek-Mozilla-Projects: Difference between revisions
→Styling HTML5 forms elements: added a bunch of specifics
(sections, some criteria, specs) |
(→Styling HTML5 forms elements: added a bunch of specifics) |
||
| Line 13: | Line 13: | ||
1. It must include pleasant and working UI, where appropriate. | 1. It must include pleasant and working UI, where appropriate. | ||
This is a big design challenge. Take a look at what Opera has done for example (in terms of dangers to avoid). | |||
2. You must be able to use CSS to style the element, especially the UI that we generate. This includes any pre-defined pseudo-selectors (invalid, required, icon, etc.) | 2. You must be able to use CSS to style the element, especially the UI that we generate. This includes any pre-defined pseudo-selectors (invalid, required, icon, etc.) | ||
Agreed, this is an absolute requirement. | |||
Whenever there is ''any'' custom appearance of a form control, e.g. based on the new types, designers ''must'' be able to restyle them to fit in with their design. This means at a minimum: | |||
* ability to select specific "pieces" of any compound/composite form control for styling | |||
** feeds into requirements for CSS pseudo-elements | |||
** existing pseudo-elements: | |||
** | |||
* ability to select specific "states" of any form control (may require ability to select states of specific pieces as well - that will be a challenge though as pseudo-elements themselves cannot have pseudo-classes in CSS) | |||
** existing [http://www.w3.org/TR/css3-selectors/#UIstates Selectors UI pseudo-classes], and some notes on [http://www.w3.org/TR/html5/interactive-elements.html#pseudo-classes how HTML5 DOM property states trigger these pseudo-classes] | |||
*** :enabled and :disabled - based on the state of the "disabled" property on the element. | |||
*** :checked - based on the "checked" property on input types "radio" and "checkbox", and also on the "selected" property on option element. | |||
*** :indeterminate - based on the "indeterminate" property of the input types "radio" and "checkbox". | |||
*** ... | |||
* typography | |||
** font properties | |||
** text properties | |||
** color | |||
* box properties | |||
** width | |||
** height | |||
** padding | |||
** border | |||
** margin | |||
** background | |||
** box-shadow | |||
3. If there's a constraint API the API must be complete. | 3. If there's a constraint API the API must be complete. | ||