APPENDIX: Default CSS styles for XForms

This section aims to build a standard collection of CSS style rules for use with XForms processors.

The purpose of the collection is twofold, with the first being to define how exactly all of the pseudo-elements and classes referenced in the XForms spec should behave.

The second goal is to provide workarounds for processors that do not support the full range of CSS features, such as pseudo-elements and classes; the following list uses 'normal' classes, but with an agreed naming convention. (The approach was agreed by the W3C's XForms Working Group.) In this situation the stylesheets can be used by authors with their own forms, but can also be distributed by implementers with their processors.

Each rule is given its own page so that comments can be attached. The most up-to-date collection of the rules--along with support files such as images--is always available via Subversion at:

http://svn.x-port.net/svn/public/xformswg/styling/

::value for input and secret

The data entry areas for input and secret are simple rectangles:

xf\:input pe-value,
xf\:secret pe-value
{
    display       : inline-block;
    border-top    : 2px inset;
    border-right  : 2px inset; 
    border-bottom : 2px inset; 
    border-left   : 2px inset;
    width         : 250px;
}

:enabled and :disabled

The ::enabled and ::disabled pseudo-classes indicate the status of the data that some control is bound to, based on the relevant Model Item Property. If a control is disabled then the default is for it not to be rendered:

.pc-disabled
{
    display : none;
}

:focus

The :focus pseudo-class indicates that a control currently has focus.

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

:hover

An element has the :hover pseudo-class when under the mouse pointer.

.pc-hover
{
   background-color: lightblue;
}

Action handlers

Action handlers are not rendered, by default:

xf\:action,
xf\:delete,
xf\:insert,
xf\:rebuild,
xf\:recalculate,
xf\:refresh,
xf\:revalidate,
xf\:send,
xf\:setvalue,
xf\:toggle
{
    display : none;
}

alert

The alert element has no state of its own, but it can be styled based on the validity of its parent element. The default style is to hide the element when the parent control is valid:

.pc-valid xf\:alert
{
  display : none;
}

item

The specific rendering of an item depends on whether it is ::selected or ::deselected and whether its parent is a select or a select1. However, there are some common style values that are set here (with the remainder set in the following sections):

xf\:item
{
  width               : 100px;
  display             : block;
  background-repeat   : no-repeat;
  background-position : right;
}

select

The default appearance of an option (i.e., an xf:item) within a select control is that of a check-box:

xf\:select .pc-selected
{
  background-image: url(check-selected.png);
}

xf\:select .pc-deselected
{
  background-image: url(check-deselected.png);
}

The images used are:

check-selected.png:   

check-deselected.png:

select1

The default styling of the options in a select1 control is to look like a radio button:

xf\:select1 .pc-selected
{
  background-image: url(radio-selected.png);
}

xf\:select1 .pc-deselected
{
  background-image: url(radio-deselected.png);
}

The images used are:

radio-selected.png:   

radio-deselected.png:

trigger

The default style for a trigger is to look like a button:

xf\:trigger
{
    padding          : 0 0 0 0;
    margin-right     : 10px;
    border-top       : 2px outset #e0e0e0;
    border-right     : 2px outset #191919;
    border-bottom    : 2px outset #191919;
    border-left      : 2px outset #e0e0e0;
    background-color : #d0d0d0;
}

xf\:trigger xf\:label
{
    display          : inline-block;
    padding-top	     : 3px;
    padding-left     : 5px;
    padding-bottom   : 3px;
    padding-right    : 5px;
    margin           : 0 0 0 0;
    border           : none;
    background-color : #d0d0d0;
    width            : auto;
    font-family	     : arial;
    cursor           : pointer;
}