Skip to content

Style your form with css

amischler edited this page Jun 30, 2011 · 13 revisions

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

Global style

Classes

The default FXForm skin defines the following classes

Class name Applied to
form-label labels
form-editor editors
form-tooltip tooltips
form-title the title of the form
form-content-box the form background
### 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-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;
}

Local style

Clone this wiki locally