SyntheticaFX CSS Reference

Note: SyntheticaFX specific CSS Properties always have the prefix -sfx.

Canvas Pane

Name Description
Style Classes
.canvas-pane CanvasPane style class.

Confirm Dialog

Name Description
Style Classes
.confirm-dialog ConfirmDialog style class - RootPane.
.message-icon Style class name of the ImageView which displays an icon at the left side of the message to emphasize the message type.

Desktop Pane

Name Description
Style Classes
.desktop-pane Style class name for desktop panes.

Details Dialog

Name Description
Style Classes
.details-dialog DetailsDialog style class - RootPane.
.message-icon Style class name of the ImageView which displays an icon at the left side of the message to emphasize the message type.
.details-button Style class name of the button used to expand/collapse the details content area.
Pseudo classes
:expanded Applies when the content pane is expanded.

Error Dialog

Name Description
Style Classes
.error-dialog ErrorDialog style class - RootPane.
.message-icon Style class name of the ImageView which displays an icon at the left side of the message to emphasize the message type.

Info Dialog

Name Description
Style Classes
.info-dialog InfoDialog style class - RootPane.
.message-icon Style class name of the ImageView which displays an icon at the left side of the message to emphasize the message type.

Input Dialog

Name Description
Style Classes
.input-dialog InputDialog style class - RootPane.
.message-icon Style class name of the ImageView which displays an icon at the left side of the message to emphasize the message type.

Internal Dialog

Name Description
Style Classes
.internal-dialog Style class name for internal dialogs.
.internal-dialog-layer Style class name of the background pane which covers the owner Node.

Internal Frame

Name Description
Style Classes
.internal-frame Style class name for internal frames.

Login Dialog

Name Description
Style Classes
.login-dialog LoginDialog style class - RootPane.
.message-icon Style class name of the ImageView which displays an icon at the left side of the message to emphasize the message type.

OptionComboBox

OptionComboBox has all properties and styles of XComboBox.
Name Description
Style Classes
.option-combo-box Style class name of the ComboBox.
.option-button Style class name of the option button inside the ComboBox.
.option-menu-button Style class name of the option menu-button inside the ComboBox.
CSS properties
-sfx-option-button-position HPos value - specifies the position of the option button. Valid values are LEFT and RIGHT. Default is LEFT.

OptionControlBox

Name Description
Style Classes
.option-control-box Style class name of the OptionControlBox.
.clear-button Style class name of the clear button.
.option-button Style class name of the option button.
.option-menu-button Style class name of the option menu-button.
CSS properties
-sfx-clearable Boolean value - specifies if the clear button will be shown on text input. Default is False.
-sfx-clear-button-position HPos value - specifies the position of the clear button. Valid values are LEFT and RIGHT. Default is RIGHT.
-sfx-option-button-position HPos value - specifies the position of the option button. Valid values are LEFT and RIGHT. Default is LEFT.

OptionDatePicker

OptionDatePicker has all properties and styles of XDatePicker.
Name Description
Style Classes
.option-date-picker Style class name of the DatePicker.
.option-button Style class name of the option button inside the DatePicker.
.option-menu-button Style class name of the option menu-button inside the DatePicker.
CSS properties
-sfx-option-button-position HPos value - specifies the position of the option button. Valid values are LEFT and RIGHT. Default is LEFT.

OptionTextField

OptionTextField has all properties and styles of XTextField.
Name Description
Style Classes
.option-text-field Style class name of the text field.
.option-button Style class name of the option button inside the text field.
.option-menu-button Style class name of the option menu-button inside the text field.
CSS properties
-sfx-option-button-position HPos value - specifies the position of the option button. Valid values are LEFT and RIGHT. Default is LEFT.

Root Layer

Name Description
Style Classes
.root-layer Style class name of the root layer pane.
.root-layer-content Style class name of the root layer content pane.

Root Pane

Name Description
Style Classes
.root-pane Style class name of the root pane. Mainly useful for window decoration styling.
.root-pane-title-pane Style class name of the container which is used as title pane of the window decoration.
.title-pane-menu-button Style class name of the menu button which normally sits on the top left edge of the window, displays the application icon and opens a popup menu to control the state of the window.
.iconify-button Style class name of the button which is used for window iconification.
.maximize-restore-button Style class name of the button which is used for to maximize/restore window.
.close-button Style class name of the button which is used for closing windows.
CSS properties
-sfx-fxml-title-pane String value - specifies the path to the FXML file used for the title pane. If not specified the default interface will be used.
-sfx-fxml-content String value - path to the FXML file used as content.
-sfx-decorated Boolean value - specifies if the window decoration should appear or not. Default is true.
-sfx-cover-taskbar Boolean value - specifies if as maximized window covers the taskbar of the operating system. Default is false.
-sfx-resize-insets Insets value - specifies the area the mouse can be used for window resizing.
-sfx-menu-button-icon-height Double value - specifies the icon height of the menu button. Default is 16.
-sfx-title-alignment HPos value - specifies the horizontal alignment of the title within the title pane. Default is HPos.CENTER.
Pseudo classes
:focused Applies when the stage/window is focused - means active.
:selected Applies when a internal frame is active - this class is for internal frames only.
:undecorated Applies when a window is not decorated.
:maximized Applies for maximized windows.
:iconified Applies for iconified windows.
:fullscreen Applies when the window state is fullscreen.
:os-windows Applies when the application is executed on the Windows operation system.
:os-mac Applies when the application is executed on the OSX operation system.
:os-linux Applies when the application is executed on a Linux operation system.
:os-android Applies when the application is executed on an Android operation system.
:os-ios Applies when the application is executed on an IOS operation system.
:os-embedded Applies when the application is executed on an embedded device i.e. Rasperry Pi.

SearchField

SearchField has all properties and styles of OptionTextField.
Name Description
Style Classes
.search-field Style class name of the text field.

Titled Border Pane

Name Description
Style Classes
.titled-border-pane Style class name of the pane.
.top-border-only Add this style class name if only the titled top edge of the border should appear.
.border-title Style class name of the title label.
CSS properties
-sfx-title-position Pos value - specifies the title position at the top border area. Default is Pos.CENTER_LEFT.
Pseudo classes
:titleless Applies when the title text is null.
:top Applies when the title text is above the border line.
:center Applies when the title text is vertically centered to the top border line.
:bottom Applies when the title text is below the border line.

Validation Node

Name Description
Pseudo classes
:invalid Applies when validation fails on the owner node - see Validation Overview.

Warning Dialog

Name Description
Style Classes
.warning-dialog WarningDialog style class - RootPane.
.message-icon Style class name of the ImageView which displays an icon at the left side of the message to emphasize the message type.

XComboBox

Name Description
Style Classes
.x-combo-box Style class name of the ComboBox.
.clear-button Style class name of the clear button inside the ComboBox.
.leading-container Style class name of the leading/left container inside the ComboBox.
.trailing-container Style class name of the trailing/right container inside the ComboBox.
CSS properties
-sfx-clearable Boolean value - specifies if the clear button will be shown on text input. Default is False.
-sfx-clear-button-position HPos value - specifies the position of the clear button. Valid values are LEFT and RIGHT. Default is RIGHT.

XDatePicker

Name Description
Style Classes
.x-date-picker Style class name of the DatePicker.
.clear-button Style class name of the clear button inside the DatePicker.
.leading-container Style class name of the leading/left container inside the DatePicker.
.trailing-container Style class name of the trailing/right container inside the DatePicker.
CSS properties
-sfx-clearable Boolean value - specifies if the clear button will be shown on text input. Default is False.
-sfx-clear-button-position HPos value - specifies the position of the clear button. Valid values are LEFT and RIGHT. Default is RIGHT.

XTableView

Name Description
Style Classes
.x-table-view Style class name of the table view.
.x-table-header Style class names of the complete table header - means regular header and filter header.
.x-nested-column-header Style class name of the table header row.
.x-table-column, x-column-header Style class names of the column table header.
.nested-filter-column-header Style class name of the table header filter row.
.filter-column-header Style class name for the column table header of the filter row.
.filter-control Style class name of the filter controls inside the filter header.
.filter-header-clear-button Style class name of the clear button insed the filter header.
.filter-header-clear-image Style class name of the area for the clear button image.
.filter-header-filler Style class name of the unused/empty space inside the filter header.

XTextField

Name Description
Style Classes
.x-text-field Style class name of the text field.
.clear-button Style class name of the clear button inside the text field.
.leading-container Style class name of the leading/left container inside the text field.
.trailing-container Style class name of the trailing/right container inside the text field.
CSS properties
-sfx-clearable Boolean value - specifies if the clear button will be shown on text input. Default is False.
-sfx-clear-button-position HPos value - specifies the position of the clear button. Valid values are LEFT and RIGHT. Default is RIGHT.

See also

JavaFX 8 CSS Reference Guide