Pseudo-classes

Pseudo-classes are classes that are automatically added and removed from controls in a form. For example, if a control is bound to some data that is invalid then the control will have the pseudo-class :invalid, but the moment that the data becomes valid again, the control will have the pseudo-class :valid. This change of state is carried out by the processor, and the author does not need to write any code to take advantage of this.

Blurred

The :blurred pseudo-class is applied to controls that have received focus at some point. A typical use is to style invalid controls in such a way that they are not shown as invalid (for example, with a red border) until the user has visited them.

A control that has had the focus can be styled as follows:

.pc-blurred
{
  border : 1px solid blue;
}

Enabled/Disabled

The :enabled and :disabled pseudo-classes are applied to controls when the instance data they are bound to becomes relevant or not.

The CSS rules to use for these pseudo-classes are:

.pc-enabled {
    display    :   block;
    background-color   :   gray;
}

and

.pc-disabled {
    display    :   none;
}

Focus

The :focus pseudo-class is applied to controls when they receive focus. A use could be to draw attention to the current field when a user tabs through controls on a form.

The CSS rule to style a control that has focus is:

.pc-focus {
  border : 1px solid green;
}

Hover

The ::hover pseudo-class is set on an element when the mouse is over it.

The following examples changes the background colour of items in a repeat when the mouse is over them:

xf\:repeat .pc-hover
{
  background-color : silver;
}

Read only/Read write

The :read-only and :read-write pseudo-classes are applied to controls when the instance data they are bound to has a model item property of readonly with a value of true or false.

The CSS classes needed to style controls are:

.pc-read-only {
    background-color  :  #E0E0E0;
}

.pc-read-write {
    background-color  :   #FFFFFF;
}

Required/Optional

The :required and :optional pseudo-classes are applied to controls when the instance data they are bound to becomes required or not via the model item property 'required'.

The CSS rules to use for these pseudo-classes are:

.pc-required {
    border : 1px solid red;
}

and

.pc-optional {
    border : 0px;
}

Valid / Invalid

The :valid and :invalid pseudo-classes are applied to controls when they are made valid or invalid by instance data model item properties such as 'type'.

The CSS rules to style controls that valid or invalid are:

.pc-valid {
    
}

and

.pc-invalid {
    border   :   1px solid red;
}