我正在尝试使用 css 样式表更改 javafx 微调器的样式。
但是,在更改颜色时,我只能更改文本字段的颜色,并且微调器侧面的箭头按钮仍然看起来像默认值。
我怎样才能改变这些按钮的颜色呢?
我正在尝试使用 css 样式表更改 javafx 微调器的样式。
但是,在更改颜色时,我只能更改文本字段的颜色,并且微调器侧面的箭头按钮仍然看起来像默认值。
我怎样才能改变这些按钮的颜色呢?
设置-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%);
}
这些被默认样式表用作按钮的背景颜色。
我知道 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;
}
我在创建自己的用于学校项目的深色主题样式表时学到了一些东西。