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).
:forms-required & :forms-optional TBD Selects any form control bound to a node with the model item property required evaluating to true or false (respectively).
:forms-valid & :forms-invalid TBD Selects any form control bound to a node that is currently valid or invalid (respectively), as defined by XForms 1.0.

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
::control 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/08/xforms/cr);

/* Display a red background on all invalid form controls */
*:forms-invalid { background-color:red; }

/* Display a red asterisk after all required form controls */
*:forms-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::control { border: thin black solid; display: table-cell; }

/* 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; }