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

- first-titled-pane — the first TitledPane

#### 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

- text — a Labeled

#### 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

- box — a StackPane
  - mark — a StackPane

#### 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

- open-button — Region
  - arrow — Region

#### 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

- color display node — Label
- arrow-button — StackPane
  - arrow — StackPane

#### ComboBox

Style class: combo-box

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

#### Substructure

- list-cell — a ListCell instance used to show the selection in the button area of a non-editable ComboBox
- text-input — a TextField instance used to show the selection and allow input in the button area of an editable ComboBox
- combo-box-popup — a PopupControl that is displayed when the button is pressed
  - list-view — a ListView
    - list-cell — a ListCell

#### ComboBoxBase

Style class: combo-box-base

The ComboBoxBase control has all the properties of Control

#### Substructure

- arrow-button — a StackPane
  - arrow — a StackPane

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

- context-menu — a Region
  - scroll-arrow — a StackPane
    - menu-up-arrow — a StackPane
  - scroll-arrow — a StackPane
    - menu-down-arrow — a StackPane
  - * — a VBox
    - menu-item — a Region
      - label — a Label
      - left-container — a StackPane (for radio buttons and check boxes)
      - right-container — a StackPane (for pull-right menus)
        - arrow — a Region
      - graphic-container — a StackPane (for MenuItem graphic)

#### 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

- date-picker-display-node — TextField

#### HTMLEditor

Style class: html-editor

The Hyperlink control has all the properties of Control.

#### Substructure

- grid — GridPane (contains WebView)
  - top-toolbar — ToolBar
    - html-editor-cut — ToggleButton
    - html-editor-copy — ToggleButton
    - html-editor-paste — ToggleButton
    - html-editor-align-left — ToggleButton
    - html-editor-align-right — ToggleButton
    - html-editor-align-center — ToggleButton
    - html-editor-align-justify — ToggleButton
    - html-editor-outdent — ToggleButton
    - html-editor-indent — ToggleButton
    - html-editor-bullets — ToggleButton
    - html-editor-numbers — ToggleButton
  - web-view — WebView
  - bottom-toolbar — ToolBar
    - format-menu-button — ComboBox
    - font-family-menu-button — ComboBox
    - font-size-menu-button — ComboBox
    - html-editor-bold — ToggleButton
    - html-editor-italic — ToggleButton
    - html-editor-underline — ToggleButton
    - html-editor-strike — ToggleButton
    - html-editor-hr — ToggleButton
    - html-editor-foreground — ColorPicker
    - html-editor-background — ColorPicker

#### 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

- label — Label

#### 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

.list-view — the ListView<T>

.virtual-flow — VirtualFlow

.clipped-container — Region

.sheet — Group

.cell.indexed-cell.list-cell — ListCell<T>

.scroll-bar — ScrollBar

#### 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

- menu

#### 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

#### Pagination

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

- page — StackPane
- pagination-control — StackPane
  - leftArrowButton — Button
    - leftArrow — StackPane
  - rightArrowButton — Button
    - rightArrow — StackPane
  - bullet-button — ToggleButton
  - number-button — ToogleButton
  - page-information — Label

#### 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

- track — StackPane
  - bar — Region

#### 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

- indicator — StackPane
- progress — StackPane
- percentage — Text
- tick — StackPane

#### RadioButton

Style class: radio-button

The RadioButton control has all the properties of ToggleButton

#### Substructure

- radio — Region
  - dot — Region
- label — Label

#### 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

- decrement-button — StackPane
  - decrement-arrow — StackPane
- track — StackPane
- thumb — StackPane
- increment-button — StackPane
  - increment-arrow — StackPane

#### 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

- viewport — StackPane
  - * — StackPane
  - The ScrollPane's content
- scroll-bar:vertical — ScrollBar
- scroll-bar:horizontall — ScrollBar
- corner — StackPane

#### 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

- line — Region

#### 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

- text-field — TextField
- increment-arrow-button — StackPane
  - increment-arrow — Region
- decrement-arrow-button — StackPane
  - decrement-arrow — Region

#### 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

- axis — NumberAxis
- track — Region
- thumb — Region

#### 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

- split-pane-divider — StackPane
  - vertical-grabber — StackPane
  - horizontal-grabber — StackPane

#### 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

- tab-header-area — StackPane
  - headers-region — StackPane
  - tab-header-background — StackPane
  - control-buttons-tab — StackPane
    - tab-down-button — Pane
      - arrow — StackPane
  - tab — Tab
    - tab-label — Label
    - tab-close-button — StackPane
- tab-content-area — StackPane

#### 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

- column-resize-line — Region
- column-overlay — Region
- placeholder — StackPane
- column-header-background — StackPane
  - nested-column-header
    - column-header
  - filler — Region
  - show-hide-columns-button — StackPane
    - show-hide-column-image — StackPane
  - column-drag-header — StackPane
    - label — Label

#### 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

- column-resize-line — Region
- column-overlay — Region
- placeholder — StackPane
- column-header-background — StackPane
  - nested-column-header
    - column-header
  - filler — Region
  - show-hide-columns-button — StackPane
    - show-hide-column-image — StackPane
  - column-drag-header — StackPane
    - label — Label
- table-column — TableColumn

#### 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

- scroll-pane — ScrollPane
  - content — Region

#### 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

- title — HBox
  - text — Label/li>
  - arrow-button — StackPane/li>
    - arrow — StackPane
- content — StackPane/li>

#### 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

- tool-bar-overflow-button — StackPane
  - arrow — StackPane

#### 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

- label — Label
- page-corner — StackPane

#### 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

- axis-label — Text
- axis-tick-mark — Path

#### 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

- chart-title — Label
- chart-content — Pane

#### Legend

Style class: chart-legend

CSS Property | Values | Default | Comments
--- | --- | --- | ---
Has all properties of Region

#### Substructure

- chart-legend-item — Label
- chart-legend-item-symbol — Node (the Label's graphic)

#### 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

- axis-minor-tick-mark — Path

#### 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

- plot-content — Group
- chart-plot-background — Region
- chart-alternative-column-fill — Path
- chart-alternative-row-fill — Path
- chart-vertical-grid-lines — Path
- chart-horizontal-grid-lines — Path
- chart-vertical-zero-line — Line
- chart-horizontal-zero-line — Line

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