使用 css 更改 javafx 微调器按钮的样式

Question

我正在尝试使用 css 样式表更改 javafx 微调器的样式。

但是，当更改颜色时，我只能更改文本字段的颜色，微调器旁边的箭头按钮看起来仍然像默认值。

如何更改这些按钮的颜色？

Answer 1

设置用作按钮背景的-fx-body-color：

.spinner .increment-arrow-button,
.spinner .decrement-arrow-button {
    -fx-body-color: yellow;
}

.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover {
    /* interpolate color between yellow and red based on first color brightness */
    -fx-body-color: ladder(#444, yellow 0%, red 100%);
}

.spinner .increment-arrow-button:hover:pressed,
.spinner .decrement-arrow-button:hover:pressed,
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed {
    /* interpolate color between yellow and red based on first color brightness */
    -fx-body-color: ladder(#AAA, yellow 0%, red 100%);
}

默认样式表使用这些颜色作为按钮的背景色。

Answer 2

我知道 OP 已经解决了，但我把它放在这里以防其他人需要答案。

您可以使用这些选择器编辑微调器按钮：

.spinner .increment-arrow-button {}
.spinner .decrement-arrow-button {}
.spinner .increment-arrow-button:hover {}
.spinner .decrement-arrow-button:hover {}
.spinner .increment-arrow-button:pressed {}
.spinner .decrement-arrow-button:pressed {}

如果您想编辑按钮内部的箭头，请使用这些选择器：

.spinner .increment-arrow-button .increment-arrow {
  /* The default Modena styling */
  -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  -fx-background-insets: 0 0 -1 0, 0;
  -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;  /* 2 4 2 4 */
  -fx-shape: "M 0 4 h 7 l -3.5 -4 z";
}
.spinner .decrement-arrow-button .decrement-arrow {
  /* The default Modena styling */
  -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
  -fx-background-insets: 0 0 -1 0, 0;
  -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
  -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

这是另一个有用的提示，人们也可能运行喜欢：更改按钮后面区域的颜色。

将这些选择器设置为透明背景将移除微调器中按钮后面的突出显示区域。您可以通过这样的方式实现：

/* In general */
.spinner {
 -fx-background-color: transparent;
}

/* On user interaction */
.spinner:focused,
.spinner:contains-focus {
  -fx-background-color: transparent;
}

我在创建自己的用于学校项目的深色主题样式表时学到的一些东西。

使用 css 更改 javafx 微调器按钮的样式

Change style of javafx spinner buttons using css

css

javafx

spinner

javafx-css