Today I was asked if I know a way to get rid of the focus-highlighting of JavaFX controls (respectively buttons):
Most posts and tips regarding this issue suggest to add:
.button:focused {
-fx-focus-color: transparent;
}But with this style, a glow like this is still left:
To get rid of this glow also often suggested to play around with -fx-background-insets additionally:
.button:focused {
-fx-focus-color: transparent;
-fx-background-insets: -1.4, 0, 1, 2;
}But this results in a button rendered with out an outer border:
Compared to the default button style:
this is still a kind of “highlighting”.
Why is that? (And why are there actually 4 inset values ?)
Having a look at the JavaFX default style as defined by modena.css bares some more information:
/* A bright blue for the focus indicator of objects. Typically used as the * first color in -fx-background-color for the "focused" pseudo-class. Also * typically used with insets of -1.4 to provide a glowing effect. */ -fx-focus-color: #f25f29; -fx-faint-focus-color: #f25f2933;
Obviously there is not only one focus color -fx-focus-color but also -fx-faint-focus-color which is meant to create this glow-effect (that remains when setting -fx-focus-color:transparent;).
A closer look at the .button:focused pseudo class (in modena.css):
.button:focused {
-fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color;
-fx-background-insets: -2, -0.3, 1, 2;
-fx-background-radius: 7, 6, 4, 3;
}Playing around with some extreme colouring reveals the arrangement:
.button:focused {
-fx-focus-color: red;
-fx-faint-focus-color: green;
-fx-inner-border: blue;
-fx-body-color: orange;
-fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color;
-fx-background-insets: -2, -0.3, 1, 2;
-fx-background-radius: 7, 6, 4, 3;
}
Getting back to the topic maybe a clever way to remove the focus highlight is to use the default button styles also for .button:focus (same approach for other controls):
.button:focused {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5, 4, 3;
}| Reference: | How to get rid of focus highlighting in JavaFX from our JCG partner Jens Deters at the JavaFX Delight blog. |
