I wanted to create two different styles of buttons in one css file. To achieve this, I added a class to the second button using:
close.getStyleClass().add("close-button");
Now, I can reference this button in the css by:
.button.close-button
However, I am unsure how to reference pseudo-classes of the button when using the .close-button class.
I attempted to access it with:
.button.close-button:selected
and
.button:selected.close-button
Unfortunately, neither of these methods seem to work. Is there a way to accomplish this or do I need to create my own pseudo-classes for the .close-button class and manage them within listeners in the code?
The button creation process involves:
Button close = new Button("X");
close.getStyleClass().add("close-button");
close.setOnAction((event) -> {
....
});
The button is then added to the layout as follows: HBox hbox = new HBox(rbSelect, label, pane, close);
My css styling is defined as:
.button {
...
}
.button.close-button {
-fx-background-color: #E81123;
}
.button:selected.close-button {
-fx-background-color: greenyellow;
}
The button appears like this: https://i.stack.imgur.com/DkM5a.png
When clicked on, it should change color to greenyellow, but currently nothing happens.