JavaFX 2.2: Modifying the skin style via css


I'm digging into customizing controls via CSS and I got pretty far. So I'm able to fully customize my scrollbar by e.g. setting track's background to transparent and so on. But I'm stuck with the ScrollBarSkin (investigated via ScenicViewer). It seems that this skin has a default background color (gradient) and a border, which I'm not able to modify. So my question is, how can i access the e.g. TableCellSkin or ScrollBarSkin, to modify background color and insets via CSS?

edit: I'm using jdk7

edit2: i found some syntax in the caspian.css for the ScrollPaneSkin. I tried the same for the scrollbar and a tablecell with:

 ScrollBarSkin>* {
    -fx-base: transparent;
    -fx-border-color: #00ff00;
    -fx-background-color: #0000ff;

but with no luck.

found solution based on jewelsea's answer (thx mate!)

I made a new class extending ScrollBarSkin and I'm overriding the getSkinnable(). This looks like this:

public class MyScrollBarSkin extends ScrollBarSkin{

    public MyScrollBarSkin(ScrollBar scrollBar) {


    public Insets getInsets() {
        // TODO Auto-generated method stub
        return super.getInsets();

    public ScrollBar getSkinnable() {
        ScrollBar curr = super.getSkinnable();
        curr.getSkin().getNode().setStyle("-fx-background-color: transparent;");
        return curr;

In the corresponding css I refer to this skin as jewelsea mentioned. Et voila!

One little question is still left: why I'm not able to directly access this component via css?

7/23/2013 6:13:31 AM

Accepted Answer

ScrollBarSkin is a class representing the skin used to render the ScrollBar. Here is an extract from a default JavaFX style sheet:

.scroll-bar {
    -fx-skin: "";

Here is a link to in the JavaFX 8 source repository. Note that it is a com.sun class, so it is not part of the public API and could disappear or change API between minor JavaFX releases without notice.

You can override the default skin with your own skin via the following css in your user stylesheet:

.scroll-bar {
    -fx-skin: "";

I just made the name and path up, you can use whatever you want.

What the skin is allowing is programmatic control over the look of the a control (i.e. it's only incidentally related to css because css is one way to set the skin on a control).

Customizing Skins is documented (to a certain extent) in the OpenJFX wiki.

The skin customization relies on a new JavaFX 8 class called SkinBase, which forms part of the javafx.scene.control public API.

Customizing skins in versions lower than Java 8 is not recommended, because then you will be working with old, undocumented and unsupported private APIs which will not work with Java 8 and later. Customizing skins in Java 8 is fine because it relies on the public API.

I'm pretty sure from your question that this isn't really what you are looking for, but it is the answer to your question (at least as I understood it).

7/22/2013 7:41:21 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow