canmove, Confirmed users
2,675
edits
Tantek-Mozilla-Projects: Difference between revisions
→Styling HTML5 forms elements: more pseudo-class details
(→Styling HTML5 forms elements: added a bunch of specifics) |
(→Styling HTML5 forms elements: more pseudo-class details) |
||
| Line 27: | Line 27: | ||
* 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) | * 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] | ** 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] | ||
*** :hover :active - based on mouse/pointer interactions. the challenge here is to find alternatives for touch based interfaces. | |||
*** :focus - an element which is currently accepting keyboard, pointer, or other input device events. | |||
*** :enabled and :disabled - based on the state of the "disabled" property on the element. | *** :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. | *** :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". | *** :indeterminate - based on the "indeterminate" property of the input types "radio" and "checkbox". | ||
*** ... | *** :default - [http://www.w3.org/TR/html5/interactive-elements.html#selector-default default buttons or submit buttons] | ||
*** :valid and :invalid - input elements that are candidates for constraint validation and either do or don't (respectively) satisfy their constraints. | |||
*** :in-range and :out-of-range - input elements that are candidates for constraint validation and that are neither under nor overflowing (for :in-range) or either under/overflowing (for :out-of-range). | |||
*** :required and :optional - [http://www.w3.org/TR/html5/interactive-elements.html#selector-required see HTML5 description of being required / required attribute] | |||
*** :read-only and :read-write - [http://www.w3.org/TR/html5/interactive-elements.html#selector-read-only see HTML5 description of read-only vs read-write elements]. | |||
* typography | * typography | ||
** font properties | ** font properties | ||