Can mark be extended outside checkbox in JavaFX using CSS?

checkbox, css, java, javafx

Solution

You can scale the graphic:

.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;
}

EDIT

To move the tick, you can translate it:

.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;
}

Problem

I want to make a custom checkbox, but my mark is limited by box size. Is there a way to extend it outside bounds? CSS code for checkbox: ``` .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;} ```

Original source