Anatomy of a Control

Your first thought when looking at the previous rules may have been that setting the width of an input to 100% ought to have made just the data entry area take up an entire line, on a separate line from the label. This is a common assumption for people used to using HTML, and the reason is that the HTML input control is only a data entry area, with any labels that might apply to it being separate and taking up their own space. This means that there is no way to style the label for a specific control.

In XForms things are different. The control encloses its own label and the data entry area, like this:

Diagram showing the various parts of a control

Each of these parts can be styled independently, and since they have a common parent they can also be styled in relation to each other. For example, if we want the data entry area of all input controls to have a light green background, we would use this rule:

  .input-value,
  {
    background-color : lightgreen;
  }

The resulting form would look something like this:

Screenshot of input controls with light green backgrounds for the data entry part