.styled-text-area .caret seems not to work

[PavelTurk]

This is java code:

public class JavaFxTest2 extends Application {

    private final InlineCssTextArea textArea = new InlineCssTextArea();

    private final VirtualizedScrollPane scrollPane = new VirtualizedScrollPane(textArea);

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        textArea.setWrapText(true);
        textArea.setEditable(true);
        textArea.setParagraphGraphicFactory(LineNumberFactory.get(textArea));
        textArea.setPadding(new Insets(0, 0, 0, 0));
        var ss = "Some text here";
        VBox.setVgrow(scrollPane, Priority.ALWAYS);
        VBox root = new VBox();

        root.getChildren().addAll(scrollPane, new TextField());
        textArea.setWrapText(true);
        var css = this.getClass().getResource("console.css").toExternalForm();
        var scene = new Scene(root, 450, 450);
        scene.getStylesheets().add(css);
        primaryStage.setScene(scene);
        primaryStage.show();
        textArea.appendText(ss);
    }
}

This is css:

.root {
    -fx-font-size: 20;
}

.styled-text-area .caret {
    -rtfx-blink-rate: 5000ms;
    -fx-stroke-width: 10.0;
}

Caret seems to blink with the same rate, and with one pixel width. Is this correct behavior?

[Jugen]

Here's a work-around:

textArea.setId( "myarea" );

#myarea .caret {
    -rtfx-blink-rate: 5000ms;
    -fx-stroke-width: 10.0;
}

Explanation: CSS is applied from least specific to most specific, with the most specific selector overriding the lesser.
Since the default CSS in "styled-text-area.css" for -rtfx-blink-rate is already highly specified as .styled-text-area .caret we need to use the Node Id specifier to override it.