Style your form with css

kevinsdooapp edited this page Feb 20, 2018 · 13 revisions

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

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.


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


.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;


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


#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");