Question

I’ve created a very simple CSS that styles two buttons.
To the first has just been added a padding.
To the second has been set the -fx-background-color, but the value is taken from caspian.css, that is the value it should have before it had been set.

.first-style { -fx-padding: 20 5 1 5; }

.second-style { -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; }

At this point i experience a strange behavior: the focus decoration stops working, and the second button doesn’t get its blue border when focused.

What’s happening?

Answer 1

You need to add a :focused psuedo-class to the second style to allow the focus ring to work otherwise you just overwrite it when you respecify the background color of the button in the second-style style class.

Sample CSS:

.root { -fx-background-color: cornsilk; -fx-padding: 10; }
.first-style { -fx-padding: 20 5 1 5; }
.second-style { -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; }
.second-style:focused { -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; }

Sample app:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class ButtonFocusCss extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) throws Exception {
    VBox layout = new VBox(15);
    Button b1 = new Button("B1");
    b1.getStyleClass().add("first-style");
    Button b2 = new Button("B2");
    b2.getStyleClass().add("second-style");
    layout.getChildren().addAll(b1, b2);
    layout.getStylesheets().add(getClass().getResource("button.css").toExternalForm());
    stage.setScene(new Scene(layout));

    stage.show();
  }
}

Update

Honestly I can’t explain exactly why the JavaFX CSS override mechanism works this way, I got the answer here by reviewing the default JavaFX 2.2 caspian.css and following a hunch on how it might work.

The best current explanation of the rules of application for JavaFX CSS is in the CSS Reference Guide section CSS and the JavaFX Scene Graph, though there are subtleties in this example for which you need to turn to a general CSS specification to understand things such as cascading order and specifity.