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.

Answer 1

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

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

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.