On my screen I want to have a TextArea and a TextField, whose background-colors I change, depending on the content. Both are not editable (in case that matters).
Currently, I am setting the background with the following command:
textArea.setStyle("-fx-control-inner-background: rgba(255,255,0,.5)");
textField.setStyle("-fx-control-inner-background: rgba(255,255,0,.5)");
While this sets the color correctly, my TextArea still looks a lot brighter than my TextField, which seems to have some sort of shadow/shading going on.
Why is this the case and is it possible to achieve the same look for both?
My colleague managed to solve it with the following lines of code for the TextField:
-fx-background-color: rgba(255,255,0,.5);
-fx-border-color: derive(-fx-text-box-border, -10%);
-fx-border-radius: 2;
Turns out one should use -fx-background-color for TextFields and -fx-control-inner-background for TextAreas. The more you know.