Pseudo-elements

The pseudo-element ::value is represented as an element with a class of 'value'. To style this element we would normally use the following syntax:

xf\:input .value
{
 width: 100px;
}

Note the space between xf\:input and .value; this is the CSS syntax for 'descendant of'. However, in the current formsPlayer architecture this won't work, and there are two alternatives.

The first is that an additional class 'input-value' is available. For example, we can set the size of the pseudo-element ::value on all inputs (i.e., the pseudo-element that would normally be addressed as xf:input::value), by doing this:

.input-value
{
 width: 100px;
}

The same pattern is used for all the controls, for example:

.select1-value
{
 width: 100px;
}

If you need to set styling on a narrower range of controls then it is possible to use classes:

.fc1 .value
{
 width: 100px;
}

<xf:input ref="firstName" class="fc1">
 <xf:label>First Name:</xf:label>
</xf:input>

However, the following will not work:

xf\:input.fc1 .value
{
 width: 100px;
}