XForms and Styling

F XForms and Styling (Non-Normative)

This informative section provides a broad outline of new and existing CSS features needed to style XForms content. A future Recommendation from the CSS Working Group will fully develop the specification of these features.

F.1 Pseudo-classes

A CSS pseudo-class is used to select elements for styling based on information that lies outside of the document tree or that cannot be expressed using the other selectors.

Name	Defined in:	Relationship to XForms
`:enabled` & `:disabled`	[CSS3]	Selects any form control bound to a node with the model item property `relevant` evaluating to true or false (respectively).
`:required` & `:optional`	TBD	Selects any form control bound to a node with the model item property `required` evaluating to true or false (respectively).
`:valid` & `:invalid`	TBD	Selects any form control bound to a node that is currently valid or invalid (respectively), as defined by XForms 1.0.
`:read-only` & `:read-write`	TBD	Selects any form control bound to a node with the model item property `readonly` evaluating to true or false (respectively).
`:out-of-range` & `:in-range`	TBD	Selects any form control bound to a node that contains a value the form control is not or is capable of rendering, (respectively).

This list is not exhaustive; other pseudo-classes may be defined.

F.2 Pseudo-elements

Pseudo-elements are abstractions about the document tree beyond those specified by the document language. Pseudo-elements do not appear in the DOM; they are used only for purposes of styling.

Name	Defined in:	Relationship to XForms
`::value`	TBD	Represents the "active" area of a form control excluding the label; this corresponds in HTML to `input` and other form control elements. This pseudo-element is a child of the form control element, and appears immediately after the required `label` element.
`::repeat-item`	TBD	Represents a single item from a repeating sequence. Its position is as a parent to all the elements in a single repeating item. Each `::repeat-item` is associated with a particular instance data node, and is affected by the model item properties (e.g. '`relevant`') found there, as the related style properties will cascade to the child elements.
`::repeat-index`	TBD	Represents the current item of a repeating sequence. Its position is as a parent of all the elements in the index repeating item (and as a child to the `::repeat-item` pseudo-element), thus any style declarations applying to this pseudo-element override those on the parent `::repeat-item`.

This list is not exhaustive; other pseudo-elements may be defined.

F.3 Examples

The following examples show how basic styling can be accomplished on form controls and repeating structures.

@namespace xforms url(http://www.w3.org/2002/xforms);
/* Display a red background on all invalid form controls */
*:invalid { background-color:red; }
/* Display a red asterisk after all required form controls */
*:required::after { content: "*"; color:red; }
/* Do not render non-relevant form controls */
*:disabled { visibility: hidden; }
/* The following declarations cause form controls and their labels
to align neatly, as if a two-column table were used */
xforms|group { display: table; }
xforms|input { display: table-row; }
xforms|input > xforms|label { display: table-cell; }
xforms|input::value { border: thin black solid; display: table-cell; }
/* Display an alert message when appropriate */
*:valid   > xforms|alert { display: none; }
*:invalid > xforms|alert { display: inline; }
/* Display repeat-items with a dashed border */
*::repeat-item { border: dashed; }
/* Display a teal highlight behind the current repeat item */
*::repeat-index { background-color: teal; }
/* Display non-relevant repeat items in the system GrayText color */
*::repeat-item:disabled { visibility: visible; color: GrayText; }


Table of Contents	Prev	Next	Bottom