可以使用 CSS 将标记扩展到 JavaFX 中的复选框之外吗？

Question

我想制作一个自定义复选框，但我的标记受到复选框大小的限制。有没有办法将它扩展到边界之外？

CSS 复选框代码：

.check-box{
-fx-font-family: "Segoe UI Light";
-fx-font-size: 18;
-fx-text-fill:#01449f;}

.check-box .box{
-fx-outer-border: #cadbec;
-fx-body-color: white;
 -fx-background-color: 
   -fx-outer-border, 
   -fx-body-color;
-fx-background-insets: 0, 1;
-fx-background-radius: 2px, 0px;}

.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";}

.check-box:selected .mark {
-fx-background-color: #0181e2;}

Answer 1

您可以缩放图形：

.check-box .mark {
    -fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
    l0.003,0.004L14.596,2.055z";
    -fx-scale-x: 2;
    -fx-scale-y: 2;
}

编辑

要移动刻度线，您可以翻译它：

.check-box .mark {
      -fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
    l0.003,0.004L14.596,2.055z";
    -fx-scale-x: 2;
    -fx-scale-y: 2;
    -fx-translate-x: 5px;
    -fx-translate-y: -3px;
}

可以使用 CSS 将标记扩展到 JavaFX 中的复选框之外吗？

Can mark be extended outside checkbox in JavaFX using CSS?

css

java

checkbox

javafx