How to customize javafx scrollbar thumb thickness by css?

Question

I tried to set thickness by -fx-pref-height: 10px; when orientation is horizontal, and by -fx-pref-width: 10px; when scrollbar orientation is vertical. But is doesn't work.

.scroll-bar:horizontal .thumb {
    -fx-background-color: derive(black, 90%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 0em;
    -fx-pref-height: 10px;
}

.scroll-bar:vertical .thumb {
    -fx-background-color: derive(black, 90%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 0em;
    -fx-pref-width: 10px;
}

How to achieve this by customizing css?

Answer 1

you can set the padding of the scrollbars to shrink the thumbs' thickness.

.scroll-bar:vertical {
    -fx-pref-width: 16.5;
    -fx-padding: 3;
}

.scroll-bar:horizontal {
    -fx-pref-height: 16.5;
    -fx-padding: 3;
}

.scroll-bar, .scroll-bar:pressed, .scroll-bar:focused {
    -fx-font-size: 15;
}