如何使用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 looked up color控制：

-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 documentation。