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 tipps regarding this issue suggesting to adding:

.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 ?)
(note he comment of David Grieve below)

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 is remaining 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 clent way to remove the focus hightlight 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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

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

11 thoughts on “How to get rid of focus highlighting in JavaFX”

  1. The reason there are four insets is that there are four layers of color used to give the button its look. Each of the insets (delimited by the comma) correspond to a layer of color, from the bottom most color to the top most. Without the insets, the colors would just sit on top of each other and you’d only see the top layer and not the other layers.

    You can find the JavaFX CSS reference guide here: http://download.java.net/jdk8/jfxdocs/javafx/scene/doc-files/cssref.html

    1. I am pleased to get comments directly from the primary source ;-)!
      Thanks for the clarification!

      I assume your comment is a reply to the question “Why is that? (And why are there actually 4 inset values ?)” right?.

      My intention was to answer that question in the followed section. That’s why I suggested to play around with the insets and to set the colors to crazy values for getting a better picture of the arrangement.

  2. In my opinion the primary question is “why remove focus in the first place?”. Focus has a purpose. Not being able to see which control has focus does not make a UI easier to use… On the other hand, I have removed focus styles, too. There are problems with the way how focus is styled by default – again, in my opinion:

    1. It is too strong. Especially on larger controls like a listview the blue rectangle is very much “in your face”.
    2. Some controls change their size when they get focus, probably because of the negative background insets. So when users tab through controls to move the focus, there are tiny layout changes while controls expand and shrink. Not pretty.

    I would prefer having those issues fixed while keeping the focus 😉

    1. One example of when the focus indication is not required is when using Buttons in a touch-based user interface. In such an interface without a keyboard, there is no point showing the focus.

  3. Hello Jens,
    I tested the ComboBoxBindingsDemoController Example.
    My SetUp is Eclipse Luna and Java 1.8u20.
    Only the following Statement does not compile:
    BooleanBinding goButtonState = valueComboBox.editorProperty().get().textProperty().isEmpty()
    .or(valueComboBox.valueProperty().asString().isEmpty());
    Because of the .textProperty() does not know the .isEmpty() function.
    What is wrong with my SetUp.
    Greetings Martin

    1. Hm. Weird as since the StringProperty still provides isEmpty().
      Compiles and runs without an issues with my 8u20.
      Are you sure your project builds with JDK8?

  4. I thought I compile with Java8 but may be an older Version.
    Because of your Question I deinstalled all other Java Versions on my Computer.
    And so it compiles with no changes on my eclipse setup.
    Hmmmm funny
    Thanks

  5. Hi thanks for this, I was working on modifying this:

    https://gist.github.com/floralvikings/10290131

    into a popup with scrollable list. And I ended up using Popup class, ScrollPane with VBox inside. But then when the scrollpane gets focused, it gets all blurry.

    Got it fix by your css:

    scrollPane.setStyle(“-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 5, 4, 3;”);

    again, thanks! – http://poeblackmarket.github.io/