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

</tr>
<tr>
    <td>editors</td>
    <td>form-editor</td>
</tr>
<tr>
    <td>tooltips</td>
    <td>form-tooltip</td>
</tr>
<tr>
    <td>the title of the form</td>
    <td>form-title</td>
</tr>
<tr>
    <td>the form background</td>
    <td>form-content-box</td>
</tr>
<tr>
    <td>constraint violation</td>
    <td>form-constraint</td>
</tr>

Component	Class
labels	form-label

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

Example

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

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