Discovering how to modify styles
If you're looking to change the appearance of your ToggleButtons using CSS style classes, a simple method is to add the desired styles and then remove them when they are no longer needed. This way, the button will retain its original formatting.
For Instance
Code for adding styles
i.toggle11.setOnAction(e->{
if(i.toggle11.isSelected()){
i.toggle11.getStyleClass().add("red-button");
i.toggle12.getStyleClass().add("white-button");
i.toggle13.getStyleClass().add("white-button");
}
else{
i.toggle13.getStyleClass().add("white-button");
}
});
Subsequently, code for removing styles
i.toggle11.getStyleClass().removeAll("red-button", "white-button");
The CSS Styles
.red-button {
-fx-background-color: red;
}
.white-button {
-fx-background-color: white;
}
Be sure to include the stylesheet with your desired CSS styles like:
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
Alternatively,
If your goal is simply to change the color of selected ToggleButtons, you can override .toggle-button:selected in your stylesheet without adding extra styling:
.toggle-button:selected {
-fx-background-color: red;
}
Overwriting existing CSS classes and pseudoclasses is usually the most straightforward approach. For more guidance on styling and customizing JavaFX components like ToggleButtons, refer to resources such as Using JavaFX UI Controls.
To explore available style classes for .toggle-button, check out this resource. Additionally, refer to the CSS reference guide for more information.