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

JKostikiadis · Accepted Answer · 2018-01-01T15:32:00.517

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 :

Thanks for your answer. I updated the image what what i have now. How to remove those corner ugly intersections. Also which CSS controls the width of the slider ? — Saurabh Kumar, Jan 01 '18 at 15:07
@Saurabhkumar check my edit about the width of the bars and also about your update post, if i am not mistaken in your image I can see you have the increment & decrement buttons, in order to remove them you need to change the -fx-shape and padding like my example above. — JKostikiadis, Jan 01 '18 at 15:34
@JKostikiadis Your answer is almost perfect! You only forgot :pressed in your last piece of CSS by the scroll-bar tumb add: .scroll-bar:horizontal .thumb:pressed, .scroll-bar:vertical .thumb:pressed — Remzi Cavdar, Oct 23 '22 at 17:46
@JKostikiadis See: https://stackoverflow.com/questions/30273020/style-pressed-button-in-javafx If you don't add :pressed then the colour could change back if your mouse isn't hovered on top of it and it's awkward when you slide the scrollbar and the colour changes. — Remzi Cavdar, Oct 23 '22 at 17:47

JavaFX 8 scroll bar css

1 Answers1

Linked