How do I remove the default border glow of a JavaFX button (when selected)?

Question

I'm trying to remove the border glow (please see screenshot below) that appears by default when a JavaFX button is selected: I also want to do this using CSS, and not declaratively from within the main JavaFX script. However, I am having trouble figuring out what CSS property I need to use (er, set to 0?) in order to remove that border.

Accepted Answer

Setting `-fx-focus-color`

Ensure that you review all updates to the answer to help you choose the appropriate solution to your problem.

To remove the focus ring display from any control from within code:

```
control.setStyle("-fx-focus-color: transparent;");
```

To remove the focus ring for all controls, apply a stylesheet:

```
.root { -fx-focus-color: transparent; }
```

To only remove the ring for all buttons, use:

```
.button { -fx-focus-color: transparent; }
```

I find the `-fx-focus-color` attribute setting more straight-forward than relying on some weird combination of insets to remove the focus ring.

In addition, you can use the same setting to change the focus ring to a different color, such as `-fx-focus-color: firebrick`.

Update Jan 20, 2015 : addition of `-fx-faint-focus-color`

JavaFX 8 shipped with a new default user agent stylesheet (modena). This new user agent stylesheet shipped with an additional setting for focus highlights: `-fx-faint-focus-color`. For Java 8 applications, it is necessary to set both `-fx-focus-color` and `-fx-faint-focus-color` to transparent to remove all traces of the focus ring. See good4m's answer to this question.

Update Dec 10, 2015: keeping exact rendering for specific controls

If you only set the focus colors to transparent as previously recommended in this answer, for some controls you may see some subtle differentiation between when a control is focused and when it is not. For many applications this will not be an issue and setting the focus colors to transparent will be sufficient.

For more information and alternate solutions, review James_D's answer to Remove blue frame from JavaFX input field and Jens Deter's blog post about How to get rid of focus highlighting in JavaFX. Be aware that the link to Jens Deter's blog unfortunately has some annoying pop-ups.

Update Sept, 2023: keeping exact rendering for a wider range of controls

To get the focused things to look exactly like unfocused things, define `:focused` styles with the same CSS rules when focused as when unfocused. The CSS rules below demonstrate this approach for many common JavaFX controls.

Unlike just setting the `-fx-focus-color` and `-fx-faint-focus-color` values, these rules will ensure that all aspects of the focused item size, padding, background etc, remain the same whether the item is focused or not.

JavaFX generally implements focus indication by additional layered backgrounds. To render the focus ring, the number and size of the control backgrounds are adjusted, leading to a slightly different rendering of the control if you just set the focus ring to transparent. If instead you override the focus CSS rules so they don't adjust the backgrounds of the control in any way, the control will look the same when the control is focused as it did when it was not focused.

The style sheet below was created by redefining many of the `:focused` CSS rules in the `modena.css` stylesheet found in the javafx controls jar file. The new rules are set so that the `:focused` rules are defined to be the same values as unfocused rules.

I generated the style sheet by copy-and-paste and changing items manually. It is not fully tested, so there may be some errors (if so, feel free to edit the post and correct them).

The list is currently deliberately incomplete, but if you have a rule that is important for a particular JavaFX control not demonstrated here and you are sure your rule is correct and optimal, please edit the example style sheet to add the additional rules. In particular, it leaves out removing styling focus handling for tables as that can be quite complex. That could perhaps handled through a separate question and answer.

The JavaFX version used for the template was 20.0.2. Future JavaFX versions may have different rules, to which the rules below would need to adapt.

I do not think removing the focus ring from things is a good idea in most cases, so I encourage you not to do this. In particular, it would not be recommended to remove focus rules for all controls in the entire application as that could be confusing to the user. But in cases where it is your desired functionality, you may wish to selectively apply excerpts from the CSS rules below on the controls you wish to adjust.

```
/* ====   BUTTON LIKE THINGS   ============================================== */
.button:focused,
.toggle-button:focused,
.radio-button:focused > .radio,
.check-box:focused > .box,
.menu-button:focused,
.choice-box:focused,
.color-picker.split-button:focused > .color-picker-label,
.combo-box-base:focused,
.slider:focused .thumb {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
}

/* ====   BOX LIKE THINGS   ================================================= */
.scroll-pane:focused,
.split-pane:focused,
.list-view:focused,
.tree-view:focused,
.table-view:f…

How do I remove the default border glow of a JavaFX button (when selected)?

Solution

Problem

Related problems