如何使用css更改Javafx中滑块轨道轨道的颜色？

Question

我有一个音乐播放器,我正在尝试更改滑块轨道颜色,而不仅仅是边框颜色

-fx-background-color:更改边框背景颜色-fx-color:更改滑块点

我试过-fx-track-fill:它不起作用.

这就是我所拥有的:

.root
{
    -fx-background-color: #383838;
}
.vbox
{
    -fx-background-color: #549534;
}
.button
{
    -fx-background-color: linear-gradient(#dc9656,#ab4642);
    -fx-text-fill: #ffffff;

}
.label
{
    -fx-text-fill: #ffffff;
}
.slider
{
     -fx-background-color: linear-gradient(#dc9656,#ab4642);
     -fx-color:#549534;
}

Answer 1

解

滑块内部的颜色由JavaFX CSS 查找颜色控制:

-fx-control-inner-background

您可以在代码中更改颜色:

slider.setStyle("-fx-control-inner-background: palegreen;");

或者在CSS中:

.slider .track {
    -fx-control-inner-background: palegreen;
}

背景

以下是滑块控件的标准CSS(来自Java 8安装中modena.css的jfxrt.jar文件内部):

.slider .track {
      -fx-background-color:
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom,
            derive(-fx-control-inner-background, -9%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -5%),
            derive(-fx-control-inner-background, -12%)
          );
    -fx-background-insets: 0 0 -1 0, 0, 1;
    -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
    -fx-padding: 0.25em; /* 3 */
}

如您所见,滑块轨道具有分层背景,其中包含阴影高光,边框和内部阴影.内部阴影是从中得到的渐变fx-control-inner-background.这就是为什么改变查找颜色的值会改变轨道内部的颜色.如果您不熟悉JavaFX CSS中背景的分层概念,请阅读JavaFX Region CSS文档.