JavaFX 8 scroll bar css

Question

I am using the following css to customize my scrollbars

/* The main scrollbar **track** CSS class  */
.workspace-grid .scroll-bar:horizontal .track,
.workspace-grid .scroll-bar:vertical .track{
    -fx-background-color:transparent;
    -fx-border-color:transparent;
    -fx-background-radius: 0em;
    -fx-border-radius:2em;
}

/* The increment and decrement button CSS class of scrollbar */
.workspace-grid .scroll-bar:horizontal .increment-button ,
.workspace-grid .scroll-bar:horizontal .decrement-button {
    -fx-background-color:transparent;
    -fx-background-radius: 0em;
    -fx-padding:0 0 10 0;

}

/* The increment and decrement button CSS class of scrollbar */

.workspace-grid .scroll-bar:vertical .increment-button ,
.workspace-grid .scroll-bar:vertical .decrement-button {

    -fx-background-color:transparent;
    -fx-background-radius: 0em;
    -fx-padding:0 10 0 0;

}

.workspace-grid .scroll-bar .increment-arrow,
.workspace-grid .scroll-bar .decrement-arrow
{
    -fx-shape: " "; 
    -fx-padding:0;
}

/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.workspace-grid .scroll-bar:horizontal .thumb,
.workspace-grid .scroll-bar:vertical .thumb {
    -fx-background-color:derive(black,90%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 2em;

}

But my scrollbars looks like following

How to make the scrollbars looks like following

EDITED

Answer 1

I am guessing you are reading this article from which you took the CSS properties (If not then have a look). From what I can see the article is fine and explains everything. They have only one minor mistake on their CSS but apart from that if you follow their instructions you will be able to achieve what you want.

Here is a mini example :

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class ScrollBarCSS extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        ScrollPane pane = new ScrollPane();
        pane.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());

        Pane emptyPane = new Pane();
        emptyPane.setPrefSize(600, 600);

        pane.setContent(emptyPane);

        stage.setScene(new Scene(pane, 200, 200));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

And the CSS (UPDATE):

.scroll-bar:horizontal .track,
.scroll-bar:vertical .track{
    -fx-background-color :transparent;
    -fx-border-color :transparent;
    -fx-background-radius : 0.0em;
    -fx-border-radius :2.0em;
}


.scroll-bar:horizontal .increment-button ,
.scroll-bar:horizontal .decrement-button {
    -fx-background-color :transparent;
    -fx-background-radius : 0.0em;
    -fx-padding :0.0 0.0 10.0 0.0;

}

.scroll-bar:vertical .increment-button ,
.scroll-bar:vertical .decrement-button {
    -fx-background-color :transparent;
    -fx-background-radius : 0.0em;
    -fx-padding :0.0 10.0 0.0 0.0;

}

 .scroll-bar .increment-arrow,
 .scroll-bar .decrement-arrow{
    -fx-shape : " ";    
    -fx-padding :0.15em 0.0;
}

 .scroll-bar:vertical .increment-arrow,
 .scroll-bar:vertical .decrement-arrow{
    -fx-shape : " ";    
    -fx-padding :0.0 0.15em;
}

.scroll-bar:horizontal .thumb,
.scroll-bar:vertical .thumb {
    -fx-background-color :derive(black,90.0%);
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 2.0em;
}

.scroll-bar:horizontal .thumb:hover,
.scroll-bar:vertical .thumb:hover {
    -fx-background-color :derive(#4D4C4F,10.0%);
    -fx-background-insets : 2.0, 0.0, 0.0;
    -fx-background-radius : 2.0em;
}

In order to increase or decrease the -fx-padding for the scrollbar increment-arrow & decrement-arrow ( of course the vertical as well ) and increase or decrease the 0.15em and find the look you want.

The result :