Question

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

但是，在更改颜色时，我只能更改文本字段的颜色，而旋转器侧面的箭头按钮仍然看起来像默认颜色。

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

Answer 1

设置用作按钮背景的checked：

.trigger("change")

默认样式表将它们用作按钮的背景颜色。

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微调按钮的样式

2 个答案: