Home » Java » Desktop Java » How to get rid of focus highlighting in JavaFX

About Jens Deters

Jens Deters is a Senior Software Developer working in the domain of Aviation Authorities. His main objectives are RIA and Desktop Applications also he loves to play with IoT related stuff.

How to get rid of focus highlighting in JavaFX

Today I was asked if I know a way to get rid of the focus-highlighting of JavaFX controls (respectively buttons):

 
 
 
 
 
 
 
 
 
button_hover

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:

button_glow

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:

button_insets

Compared to the default button style:

button

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;
}

 
button_hover_style

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;
}

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments