Style your form with css

FXForm defines CSS classes and IDs for most form components, so that they can be easily styled:

CSS files

CSS files defining the styles must be added to the scene. For each form, FXForm will automatically try to load a corresponding CSS file whose directory and name matches the package and name of the class using the form.

Classes

The default FXForm skin defines the following classes

Component	Class
labels	form-label
editors	form-editor
tooltips	form-tooltip
the title of the form	form-title
the form background	form-content-box
constraint violation	form-constraint
global constraint violation	global-form-constraint

Example

.form-label {
    -fx-font-size: 20;
}

.form-editor {
    -fx-font-size: 20;
}

.form-title {
    -fx-font-size: 20;
    -fx-text-fill: dimgray;
}

.form-tooltip {
    -fx-font-size: 11;
    -fx-text-fill: gray;
}

.form-constraint .label {
    -fx-font-size: 20;
    -fx-text-fill: red;
}

.form-constraint ImageView {
    -fx-image: url("myWarning.jpg");
}

.form-content-box {
    -fx-background-color : linear (0%,0%) to (0%,20%) stops (0%, rgba(225,225,225,1)) (100%, white);
    -fx-background-radius : 5, 5, 5, 5;
    -fx-border-color: linear (0%,0%) to (0%,20%) stops (0%, dimgray) (100%, white);
    -fx-border-radius: 5;
}

ID

If you need to finer tune the style of a single field label or editor you can access it using their id selector:

where field-name is the name of the field as defined in the bean.

Component	ID
label	field-name-form-label
editor	field-name-form-editor
tooltip	field-name-form-tooltip
constraint violation	field-name-form-constraint
global constraint violation	global-form-constraint

Example

#lucky-form-label {
    -fx-text-fill: blue;
}

#name-form-editor {
    -fx-text-fill: green;
}

How to retrieve a specific node of the form

Using the id assigned by FXForm to the form nodes, you can retrieve those nodes using the lookup method :

TextField nameTextField = (TextField) fxForm.lookup("#name-form-editor");