javafx.scene.control

Since JavaFX 2.0, the default skins for all controls support styling from CSS. This is accomplished by building the skins from layout objects called Regions. Most of the style properties for a control are provided by the Region objects that comprise the control's skin. Each Region object of the skin's substructure has its own style‑class so that it can be styled specifically. The control itself will sometimes provide CSS properties in addition to those provided by its Regions. Finally, controls may also define pseudo‑classes such as "vertical" and "horizontal" in addition to those defined by Node.

With the following exceptions, controls are focus traversable. This means that Control sets the initial value of the focusTraversable property true; whereas in Node, the initial value of the focusTraversable property is false. The following controls are not focus traversable by default: Accordion, Cell, Label, MenuBar, ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.

Accordion

Style class: accordion

The Accordion control has all the properties and pseudo‑classes of Control

Substructure

Button

Style class: button

The Button control has all the properties of ButtonBase

Pseudo-classes

CSS Pseudo-class Comments
cancel applies if this Button receives VK_ESC if the event is not otherwise consumed
default applies if this Button receives VK_ENTER if the event is not otherwise consumed
Also has all pseudo‑classes of ButtonBase

ButtonBase

The ButtonBase control has all the properties of Labeled

Pseudo-classes

CSS Pseudo-class Comments
armed applies when the armed variable is true
Also has all pseudo‑classes of Labeled

Cell

Style class: cell

CSS Property Values Default Comments
-fx-cell-size <size> 24 The cell size. For vertical ListView or a TreeView or TableView this is the height, for a horizontal ListView this is the width.
The Cell control has all the properties of Labeled

Pseudo-classes

CSS Pseudo-class Comments
empty applies when the empty variable is true
filled applies when the empty variable is false
selected applies when the selected variable is true
Also has all pseudo‑classes of Labeled

Substructure

CheckBox

Style class: check-box

The CheckBox control has all the properties of ButtonBase

Pseudo-classes

CSS Pseudo-class Comments
selected applies when the selected variable is true
determinate applies when the indeterminate variable is false
indeterminate applies when the indeterminate variable is true
Also has all pseudo‑classes of ButtonBase

Substructure

CheckMenuItem

Pseudo-classes

CSS Pseudo-class Comments
selected applies if this item is selected

ChoiceBox

Style class: choice-box

The ChoiceBox control has all the properties and pseudo‑classes of Control

Substructure

ColorPicker

Style class: color-picker

The ColorPicker control has all the properties and pseudo‑classes of ComboBoxBase

CSS Property Values Default Comments
-fx-color-label-visible <boolean> true  
Also has all properties of Control

Substructure

ComboBox

Style class: combo-box

The ComboBox control has all the properties and pseudo‑classes of ComboBoxBase

Substructure

ComboBoxBase

Style class: combo-box-base

The ComboBoxBase control has all the properties of Control

Substructure

CSS Pseudo-class Comments
editable applies when the editable variable is true
showing applies when the showing variable is true
armed applies when the armed variable is true

ContextMenu

Style class: context-menu

The ContextMenu class has all the properties of PopupControl.

The selector for a ContextMenu may be made more specific by using the selector for the control from which the ContextMenu was shown. For example,

.choice-box > .context-menu { ... }

Substructure

Control

The Control class has all the properties of Region

CSS Property Values Default Comments
-fx-skin <string> null The class name of the Control's Skin.
-fx-focus-traversable <boolean> true Control sets the default value of the focusTraversable property to true. The default value of the focusTraversable property for the following controls is false: Accordion, Cell, Label, MenuBar, ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.

DatePicker

Style class: date-picker

The DatePicker control has all the properties and pseudo‑classes of ComboBoxBase

CSS Property Values Default Comments
-fx-show-week-numbers <boolean> true if the resource bundle property "DatePicker.showWeekNumbers" contains the country code.  
Also has all properties of Control

Substructure

HTMLEditor

Style class: html-editor

The Hyperlink control has all the properties of Control.

Substructure

Hyperlink

Style class: hyperlink

The Hyperlink control has all the properties of ButtonBase.

CSS Property Values Default Comments
-fx-cursor [ null | crosshair | default | hand | move | e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | v-resize | text | wait ] | <url> hand inherits

Pseudo-classes

CSS Pseudo-class Comments
visited applies when the visited variable is true
Also has all pseudo‑classes of ButtonBase

Substructure

IndexedCell

Style class: indexed-cell

The IndexedCell control has all the properties of Cell.

Pseudo-classes

CSS Pseudo-class Comments
even applies if this cell's index is even
odd applies if this cell's index is odd
Also has all pseudo‑classes of Cell

Label

Style class: label

Label has all the properties and pseudo‑class state of Labeled

Labeled

CSS Property Values Default Comments
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] center-left  
-fx-text-alignment [ left | center | right | justify ] left text-align from CSS spec maps to textAlignment in JavaFX
-fx-text-overrun [ center-ellipsis | center-word-ellipsis | clip | ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis ] ellipsis  
-fx-wrap-text <boolean> false  
-fx-font <font> platform dependent inherits
The initial value is that of Font.getDefault()
-fx-underline <boolean> false  
-fx-graphic <uri> null  
-fx-content-display [ top | right | bottom | left | center | right | graphic-only | text-only ] left  
-fx-graphic-text-gap <size> 4  
-fx-label-padding <size> | <size> <size> <size> <size> [0,0,0,0]  
-fx-text-fill <paint> black  
-fx-ellipsis-string <string> ...  
Also has properties of Control

ListCell

Style class: list-cell

The ListCell control has all the settable properties and pseudo‑classes of IndexedCell.

ListView

Style class: list-view

CSS Property Values Default Comments
-fx-orientation [ horizontal | vertical ] vertical  

Pseudo-classes

CSS Pseudo-class Comments
horizontal applies if this ListView is horizontal
vertical applies if this ListView is vertical

Substructure

Menu

Style class: menu

Pseudo-classes

CSS Pseudo-class Comments
showing applies if this Menu is showing
Also has all pseudo‑classes of Control

MenuBar

Style class: menu-bar

CSS Property Values Default Comments
-fx-use-system-menu-bar <boolean> false  
Also has all properties of Control

MenuBar has all the pseudo‑class states of Control

Substructure

MenuButton

Style class: menu-button

The MenuButton control has all the properties of ButtonBase

Pseudo-classes

CSS Pseudo-class Comments
openvertically applies if the openVertically variable is true
showing applies if the showing variable is true
Also has all pseudo‑classes of Node

MenuItem

Style class: menu-item

Style class: pagination

Pagination has all the pseudo‑class states of Control

CSS Property Values Default Comments
-fx-max-page-indicator-count <number> 10  
-fx-arrows-visible <boolean> true  
-fx-tooltip-visible <boolean> false When set to true, a tooltip which shows the page number is set on the page indicators. This property controls whether or not the tooltip is visible on the page indicators and does not affect the visibility of the tooltip set or installed on the Pagination control itself.
-fx-page-information-visible <boolean> true  
-fx-page-information-alignment [ top | bottom | left | right ] bottom  
Also has all properties of Control

Substructure

PasswordField

Style class: password-field

The PasswordField control has all the properties of TextField

PopupControl

PopupControl is also a PopupWindow and as such, its root node has the style-class .root.popup

ProgressBar

Style class: progress-bar

CSS Property Values Default Comments
-fx-indeterminate-bar-length <number> 60  
-fx-indeterminate-bar-escape <boolean> true  
-fx-indeterminate-bar-flip <boolean> true  
-fx-indeterminate-bar-animation-time <number> 2.0  
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
determinate applies if the indeterminate variable is false
indetermindate applies if the indeterminate variable is true
Also has all pseudo‑classes of Control

Substructure

ProgressIndicator

Style class: progress-indicator

CSS Property Values Default Comments
-fx-indeterminate-segment-count <number> 8  
-fx-progress-color <paint> null  
-fx-spin-enabled <boolean> false  
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
determinate applies if the indeterminate variable is false
indetermindate applies if the indeterminate variable is true
Also has all pseudo‑classes of Control

Substructure

RadioButton

Style class: radio-button

The RadioButton control has all the properties of ToggleButton

Substructure

RadioMenuItem

Pseudo-classes

CSS Pseudo-class Comments
selected applies if this item is selected

ScrollBar

Style class: scroll-bar

CSS Property Values Default Comments
-fx-orientation [ horizontal | vertical ] horizontal  
-fx-block-increment <number> 10  
-fx-unit-increment <number> 1  

Pseudo-classes

CSS Pseudo-class Comments
vertical applies if this ScrollBar is vertical
horizontal applies if this ScrollBar is horizontal
Also has all pseudo‑classes of Control

Substructure

ScrollPane

Style class: scroll-pane

CSS Property Values Default Comments
-fx-fit-to-width <boolean> false  
-fx-fit-to-height <boolean> false  
-fx-pannable <boolean> false  
-fx-hbar-policy [ never | always | as-needed ] as-needed  
-fx-vbar-policy [ never | always | as-needed ] as-needed  
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
pannable applies if this ScrollPane is pannable
fitToWidth applies if this ScrollPane is fitToWidth
fitToHeight applies if this ScrollPane is fitToHeight
Also has all pseudo‑classes of Control

Substructure

Separator

Style class: separator

CSS Property Values Default Comments
-fx-orientation [ horizontal | vertical ] horizontal  
-fx-halignment [ left | center | right ] center  
-fx-valignment [ top | center | baseline | bottom ] center  
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
horizontal applies if this Separator is horizontal
vertical applies if this Separator is vertical
Also has all pseudo‑classes of Control

Substructure

Spinner

Style class: spinner

Note that the default style class, "spinner", puts arrows on right, stacked vertically. The following style classes can also be used in combination with the default style class in order to control the layout of the Spinner.
style class Comment
arrows-on-right-horizontal The arrows are placed on the right of the Spinner, pointing horizontally (i.e. left and right)
arrows-on-left-vertical The arrows are placed on the left of the Spinner, pointing vertically (i.e. up and down)
arrows-on-left-horizontal The arrows are placed on the left of the Spinner, pointing horizontally (i.e. left and right)
split-arrows-vertical The arrows are placed above and beneath the spinner, stretching to take the entire width
split-arrows-horizontal The decrement arrow is placed on the left of the Spinner, and the increment on the right

CSS Property Values Default Comments
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
Also has all pseudo‑classes of Control

Substructure

Slider

Style class: slider

CSS Property Values Default Comments
-fx-orientation [ horizontal | vertical ] horizontal  
-fx-show-tick-labels <boolean> false  
-fx-show-tick-marks <boolean> false  
-fx-major-tick-unit <number> 25  
-fx-minor-tick-count <integer> 3  
-fx-show-tick-labels <boolean> false  
-fx-snap-to-ticks <boolean> false  
-fx-block-increment <integer> 10  
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
horizontal applies if this Slider is horizontal
vertical applies if this Slider is vertical
Also has all pseudo‑classes of Control

Substructure

SplitMenuButton

Style class: split-menu-button

CSS Property Values Default Comments
Also has all properties of MenuButton

SplitPane

Style class: split-pane

CSS Property Values Default Comments
-fx-orientation [ horizontal | vertical ] horizontal  
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
horizontal applies if this Slider is horizontal
vertical applies if this Slider is vertical
Also has all pseudo‑classes of Control

Substructure

TabPane

Style class: tab-pane

Note: The styleclass is "tab-pane floating" if the TabPane is floating.

CSS Property Values Default Comments
-fx-tab-min-width <integer> 0  
-fx-tab-max-width <integer> Double.MAX_VALUE  
-fx-tab-min-height <integer> 0  
-fx-tab-max-height <integer> Double.MAX_VALUE  
-fx-open-tab-animation [ grow | none ] grow 'none' disables Tab opening animation
-fx-close-tab-animation [ grow | none ] grow 'none' disables Tab closing animation
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
top applies if the side is top
right applies if the side is rght
bottom applies if the side is bottom
left applies if the side is left
Also has all pseudo‑classes of Control

Substructure

TableColumnHeader

Style class: column-header

CSS Property Values Default Comments
-fx-size <size> 20 The table column header size.
Also has all properties of Region

Pseudo-classes

CSS Pseudo-class Comments
last-visible applies if this is the last visible column in the table.
Also has all pseudo‑classes of Node

Substructure

TableView

Style class: table-view

CSS Property Values Default Comments
-fx-fixed-cell-size <size> -1 A value greater than zero sets the fixed cell size of the table. A value of zero or less disables fixed cell size.
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
cell-selection applies if this TableView's selection model is cell selection
row-selection applies if this TableView's selection model is row selection
Also has all pseudo‑classes of Node

Substructure

TextArea

Style class: text-area

CSS Property Values Default Comments
-fx-pref-column-count number 40  
-fx-pref-row-count number 10  
-fx-wrap-text boolean false  
Also has all properties of TextInputControl

Substructure

TextInputControl

CSS Property Values Default Comments
-fx-font <font> null inherits
-fx-text-fill <paint> black  
-fx-prompt-text-fill <paint> gray  
-fx-highlight-fill <paint> dodgerblue  
-fx-highlight-text-fill <paint> white  
-fx-display-caret <boolean> true  
Also has Font Properties and all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
readonly applies if this TextInputControl is not editable
Also has all pseudo‑classes of Control

TextField

Style class: text-field

CSS Property Values Default Comments
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] center-left  
-fx-pref-column-count number 12  
Also has all properties of TextInputControl

TextField has all the pseudo‑class states of TextInputControl

TitledPane

CSS Property Values Default Comments
-fx-animated <boolean> true  
-fx-collapsible <boolean> true  
Also has Font Properties and all properties of Labeled

Pseudo-classes

CSS Pseudo-class Comments
expanded applies if this TitledPane is expanded
collapsed applies if this TitledPane is collapsed
Also has all pseudo‑classes of Labeled

Substructure

ToggleButton

Style class: toggle-button

The ToggleButton control has all the properties of ButtonBase.

Pseudo-classes

CSS Pseudo-class Comments
selected applies if this ToggleButton is selected
Also has all pseudo‑classes of ButtonBase

ToolBar

Style class: tool-bar

CSS Property Values Default Comments
-fx-orientation [ horizontal | vertical ] horizontal  
Also has all properties of Control

Pseudo-classes

CSS Pseudo-class Comments
horizontal applies if this ToolBar is horizontal
vertical applies if this ToolBar is vertical
Also has all pseudo‑classes of Control

Substructure

Tooltip

Style class: tooltip

CSS Property Values Default Comments
-fx-text-alignment [ left | center | right | justify ] left  
-fx-text-overrun [ center-ellipsis | center-word-ellipsis | clip | ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis ] ellipsis  
-fx-wrap-text <boolean> false  
-fx-graphic <uri> null  
-fx-content-display [ top | right | bottom | left | center | right | graphic-only | text-only ] left  
-fx-graphic-text-gap <size> 4  
-fx-font <font> Font.DEFAULT inherits

Substructure

TreeCell

Style class: tree-cell

CSS Property Values Default Comments
-fx-indent <size> 10 The amout of space to multiply by the treeItem.level to get the left margin
Also has all properties of IndexedCell

Pseudo-classes

CSS Pseudo-class Comments
expanded applies if this cell is expanded
collapsed applies if this cell is not expanded
Also has all pseudo‑classes of IndexedCell

TreeTableCell

Style class: tree-table-cell

CSS Property Values Default Comments
Also has all properties of IndexedCell

Pseudo-classes

CSS Pseudo-class Comments
last-visible true if this is the last visible cell, typically the right-most cell in the TreeTableView
Also has all pseudo‑classes of IndexedCell

TreeView

Style class: tree-table-view

CSS Property Values Default Comments
-fx-fixed-cell-size <size> Region.USE_COMPUTED_SIZE If both -fx-cell-size and -fx-fixed-cell-size properties are specified in CSS, -fx-fixed-cell-size takes precedence.
Also has all properties and pseudo‑class state of Control

TreeView

Style class: tree-view

CSS Property Values Default Comments
-fx-fixed-cell-size <size> Region.USE_COMPUTED_SIZE If both -fx-cell-size and -fx-fixed-cell-size properties are specified in CSS, -fx-fixed-cell-size takes precedence.
Also has all properties and pseudo‑class state of Control

Charts

javafx.scene.chart

AreaChart

Style class Comments Properties
"chart-series-area-line series<i> default-color<j>" Where <i> is the index of the series and <j> is the series’ color index. Node
"chart-series-area-fill series<i> default-color<j>" Where <i> is the index of the series and <j> is the series’ color index. Path
"chart-area-symbol series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index Path
"chart-area-symbol series<i> area-legend-symbol default-color<j>" Where <i> is the index of the series and <j> is the series’ color index LegendItem

CSS Property Values Default Comments
Has all properties of XYChart

Axis

Style class: axis

CSS Property Values Default Comments
-fx-side Side null  
-fx-tick-length <size> 8  
-fx-tick-label-font <font> 8 system  
-fx-tick-label-fill <paint> black  
-fx-tick-label-gap <size> 3  
-fx-tick-mark-visible <boolean> true  
-fx-tick-labels-visible <boolean> true  
Has all properties of Region

Substructure

BarChart

Style class Comments Properties
"bar-chart"    
"chart-bar series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index. If the data value is negative, the "negative" style class is added; e.g., .negative.chart-bar. Node
"chart-bar series<i> bar-legend-symbol default-color<j>" Where <i> is the index of the series and <j> is the series’ color index LegendItem

CSS Property Values Default Comments
-fx-bar-gap <number> 4  
-fx-category-gap <number> 10  
Has all properties of XYChart

BubbleChart

Style class Comments Properties
"chart-bubble series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index Node
"chart-bubble series<i> bubble-legend-symbol default-color<j>" Where <i> is the index of the series and <j> is the series’ color index LegendItem

CSS Property Values Default Comments
Has all properties of XYChart

CategoryAxis

Style class: axis

CSS Property Values Default Comments
-fx-start-margin <number> 5 The margin between the axis start and the first tick-mark
-fx-end-margin <number> 5 The margin between the axis start and the first tick-mark
-fx-gap-start-and-end <boolean> true If this is true then half the space between ticks is left at the start and end
Has all properties of Axis

Chart

Style class: chart

CSS Property Values Default Comments
-fx-legend-side Side bottom  
-fx-legend-visible <boolean> true  
-fx-title-side Side top  
Has all properties of Region

Substructure

Legend

Style class: chart-legend

CSS Property Values Default Comments
Has all properties of Region

Substructure

LineChart

Style class Comments Properties
"chart-series-line series<i> default-color<j>" Where <i> is the index of the series and <j> is the series’ color index Node
"chart-line-symbol series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index Node
"chart-line-symbol series<i> default-color<j>" Where <i> is the index of the series and <j> is the series’ color index LegendItem

CSS Property Values Default Comments
-fx-create-symbols <boolean> true  
Has all properties of XYChart

NumberAxis

Style class: axis

CSS Property Values Default Comments
-fx-tick-unit <number> 5 The value between each major tick mark in data units.
Has all properties of ValueAxis

PieChart

Style class Comments Properties
"chart-pie data<i> default-color<j>" Where <i> is the index of the data and <j> is the series’ color index. If the data value is negative, the "negative" style‑class is added; e.g., .negative.chart-pie. Node
"chart-pie-label-line;"   Path
"chart-pie-label;"   Text
"pie-legend-symbol <i–th data item’s style‑class>" Each item in the legend has the style‑class "pie-legend-symbol" plus the style‑class of the corresponding data item LegendItem

CSS Property Values Default Comments
-fx-clockwise <boolean> true  
-fx-pie-label-visible <boolean> true  
-fx-label-line-length <size> 20  
-fx-start-angle <number> 0  
Has all properties of Chart

ScatterChart

Style class Comments Properties
"chart-symbol series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index Node
  The LegendItem symbols are assigned the style‑class of the first symbol of the series. LegendItem

CSS Property Values Default Comments
Has all properties of XYChart

ValueAxis

Style class: axis

CSS Property Values Default Comments
-fx-minor-tick-length <size> 5  
-fx-minor-tick-count <size> 5  
-fx-minor-tick-visible <boolean> true  
Has all properties of Axis

Substructure

XYChart

Style class: set by sub-type

CSS Property Values Default Comments
-fx-alternative-column-fill-visible <boolean> true  
-fx-alternative-row-fill-visible <boolean> true  
-fx-horizontal-grid-lines-visible <boolean> true  
-fx-horizontal-zero-line-visible <boolean> true  
-fx-vertical-grid-lines-visible <boolean> true  
-fx-vertical-zero-line-visible <boolean> true  
Has all properties of chart

Substructure

References

[1] CSS 2.1: http://www.w3.org/TR/CSS21/

[2] CSS 3 work in progress http://www.w3.org/Style/CSS/current-work (May 2010).

[3] SVG Paths: http://www.w3.org/TR/SVG/paths.html

[4] CSS Backgrounds and Borders Module Level 3: http://www.w3.org/TR/css3-background/

[5] Uniform Resource Identifier (URI): Generic Syntax RFC-3986


Submit a bug or feature
For further API reference and developer documentation, see Java SE Documentation. That documentation contains more detailed, developer-targeted descriptions, with conceptual overviews, definitions of terms, workarounds, and working code examples.
Copyright © 2008, 2017, Oracle and/or its affiliates. All rights reserved. Use is subject to license terms. Also see the documentation redistribution policy.