Selection lists

Each of the items in a xf:select1 or xf:select is actually a CSS 'list item'. This means that each item in the selection list can have its appearance controlled using the list-style-image CSS property. The default style is for items in a xf:select1 to have a radio button, and for xf:select items to use a check-box. To indicate that there should be no images, simply set the list style image to nothing:

<style>
  xf\:select1.my-select xf\:item xf\:label
  {
    list-style-image: none;
  }
</style>
.
.
.
<xf:select ref="x" class="my-select">
  ...
</xf:select>

When an item is selected by a user, it acquires the pseudo-class 'selected', and similarly those which are not currently selected have the pseudo-class 'deselected'. With these pseudo-classes it is possible to use any CSS properties to indicate the state of the items to the user. For example, to modify our selection list such that selected items show as white on black, whilst unselected items are to be black on white, we would use the following CSS rules:

.my-select .pc-deselected
{
  background-color: white;
  color: black;
}

.my-select .pc-selected
{
  background-color: black;
  color: white;
}

NOTE: In versions prior to 1.5.5.1014 the pseudo-classes are 'selected' and 'deselected'.

When the mouse is moved over an item, that item acquires the pseudo-class 'hover'. The default style for a hovered item is to change the background colour to cyan, but this can be overridden. For example, to set the hover style of selected and unselected items in the xf:select above, we would do this:

.my-select xf\:item.pc-selected.pc-hover,
.my-select xf\:item.pc-deselected.pc-hover
{
  background-color: blue;
}

NOTE: In versions prior to 1.5.5.1014 the pseudo-class is 'hover'.

Note that simply using pc-hover wouldn't be sufficient to override this, since the rule needs to be more specific.

The 'selected' and 'deselected' pseudo-classes also allow more specific images to be used to give the form user better feedback. For example, if we have a list of items and want to show a happy face when one is selected, but a sad one otherwise, we would use the following style rules:

.my-select xf\:item.pc-selected xf\:label
{
  list-style-image: url("happy.gif");
}

.my-select xf\:item.pc-deselected xf\:label
{
  list-style-image: url("sad.gif");
}

The appearance state of a xf:select1 or xf:select is also available as a CSS pseudo-class. To illustrate its use, the following CSS rules will remove the radio buttons for all minimal xf:select1 elements:

xf\:select1.attr-appearance-minimal xf\:item xf\:label
{
  list-style-image: none;
}

NOTE: In versions prior to 1.5.5.1014 the class names are 'minimal', 'compact' and 'full'.

By default, xf:select1 is displayed as if appearance were set to 'minimal', whilst xf:select is displayed as if appearance were set to 'full'.

xf:choices can be styled to any level in both minimal and full controls; the default behaviour is to indent each set of choices by 2em per level.

More examples are available in the Subversion repository:

http://svn.x-port.net/svn/public/samples/styling/select/