CSS
Hover the classes to see matching element(s) in the example
xfTrigger matches an Element that represents a XForms trigger element
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control
xfReadOnly matches a xforms control that is currently readonly
xfReadWrite matches a xforms control that is currently writable
xfRequired matches a xforms control that is currently required
xfOptional matches a xforms control that is currently optional
xfEnabled matches a xforms control that is currently relevant (enabled)
xfDisabled matches a xforms control that is currently disabled (can't be visualized here as the control gets hidden)
xfValid matches a xforms control that is currently valid
xfInvalid matches a xforms control that is currently invalid

# Trigger control rendered as button with an css-styled image

This form control is similar to the HTML element button and allows for user-triggered actions. This form control may also be used to construct other custom form controls.

A trigger can be styled by CSS. Here the trigger is given an id and a CSS matcher is added for it. The corresponding button rendered in HTML will have the original id with '-value' attached. The matcher for the button is therefore #trigger1-value. This is only one example how to style controls with CSS. Besides identity matching alternative style rules are possible to achieve the same result. E.g. instead of #trigger1 .xfValue would match the same element in the tree.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

a Hint for this control help for trigger1 The trigger was clicked
readonly relevant

## XForms Markup

    <xf:trigger id="trigger1" ref="trigger1/value">
                            <xf:label></xf:label>
                            <xf:hint>a Hint for this control</xf:hint>
                            <xf:help>help for trigger1</xf:help>
                            <xf:message>The trigger was clicked</xf:message>
                        </xf:trigger>