CODEWITHSUNDEEP
javajavafx
Suemayah Eldursi
Suemayah Eldursi

Reputation: 1009

Styling javafx checkbox

I've tried to apply the following styles to my CheckBox 

.check-box .box {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-white;
}

.check-box:selected .mark {
    -fx-background-color: -fx-colour-white;
}

.check-box:selected .box {
    -fx-background-color: -fx-blue;
}

The goal is to have a white checkbox with grey border and when the checkbox is checked to have a blue background and white tick. When I apply these styles I get the result I want. However an odd thing happens when doing the following steps:
1- click on checkbox to select
2- click on checkbox to deselect
The checkbox disappears and will only appear again if I click on somewhere else in the pane.

You can see the images below of the checkbox when it is first rendered then when it is checked.

Checkbox in normal stateSelected CheckboxDeselected Checkbox

Upvotes: 1

Views: 22492

Answers (1)

Bo Halim
Bo Halim

Reputation: 1776

I do not think that the problem comes from your StyleSheets, I think it's due to a bad manipulation in your Java code, you said :

The checkbox disappears and will only appear again if I click on somewhere else in the pane

So start with your Pane, look at whether there is a related event, and concerning the style, your method is almost correct, this is how I would have proceeded :

.check-box .box {

-fx-background-color: white;
-fx-border-color:grey;
-fx-border-radius:3px; 

}

.check-box:selected .mark {

-fx-background-color: white;

}

.check-box:selected .box {

-fx-background-color: #28a3f4;
}

Good luck !

Upvotes: 13

Related Questions