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:

The blue border is the default styling by JavaFX for when the the 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.

score 99 · Accepted Answer · edited May 23 '17 at 12:34

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.

@Unknown, the radius isn't related to the focus ring. See [styling a button with css](http://fxexperience.com/2011/12/styling-fx-buttons-with-css/). If the link doesn't answer your question, ask a new question. — jewelsea, Jul 26 '16 at 07:06
@jewelsea no body is answering my already asked question. http://stackoverflow.com/questions/38545939/customize-javafx-menubar-to-remove-margin That's why I tried to ask in comments. ( Not the same question but have a problem ) — Asif Mushtaq, Jul 26 '16 at 07:27

score 68 · Answer 2 · answered Jan 19 '15 at 19:44

68

-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;

answered Jan 19 '15 at 19:44

JP_

1,636
15
26

score 21 · Answer 3 · answered Mar 04 '15 at 11:29

21

If you want to remove this focus ring in JavaFX 8, rewrite the :focus selector with the .button selector style from modena.css.

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

answered Mar 04 '15 at 11:29

Zoltán Barics

431
6
11

3

This needs to be higher up. All other solutions here won't work for JavaFX 8. – Saturn Aug 26 '15 at 17:53
2

This one seems to come the closest, but the corners on a focused button have a different radius. – Dec 17 '15 at 02:45
Ya for me just the `-fx-background-color` line was needed. – Leif Gruenwoldt Jan 21 '17 at 20:36

score 20 · Answer 4 · answered Nov 09 '13 at 17:48

20

There is several way to do this. You can try any of this.

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

or

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

or

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

answered Nov 09 '13 at 17:48

Shekh Shagar

1,305
1
11
22

score 10 · Answer 5 · edited May 23 '17 at 12:34

The answer from Stelios Adamantidis is correct, which is

.button:focused {
  -fx-background-insets: 0, 0, 1, 2;
}

Here is my explanation:

For example the definition

-fx-background-color: red, green, deepskyblue, blue;

seems to define four layers of background colors, with red as the color for the backmost layer.

For example the definition

-fx-background-radius: 0, 1, 4, 10;

sets the radius for all corners for each color layer. Here, the red layer has all corners with the radius of 0, the green layer has all corners with the radius of 1 and so on.

For example the definition

-fx-background-insets: -10, 0, 3, 5;

sets the padding for the color layers. You can also set negative values then the color will be around the control.

The default values for a button seem to be something like this:

.button:focused {
  -fx-background-color: <blueGlowingColor>, <?>, <?>, linear-gradient(to bottom, <?>, <?>);
  -fx-background-insets: -1, 0, 1, 2;
}

Setting the first value of insets to 0 hides the glowing color behind the second color.

More about JavaFX CSS you can find here:
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

score 9 · Answer 6 · answered Aug 03 '20 at 13:38

9

To completely disable this button selecting do:

button.setFocusTraversable(false);

It's much cleaner than editing in css.

answered Aug 03 '20 at 13:38

Šimon Vyhnis

408
3
9

Better answer for JavaFX 8+. May be adjusted in Scene Builder too. – Adalberto José Brasaca Aug 16 '20 at 14:55
yes, this should be the accepted answer currently :) – Nicolas Gehlert Nov 07 '20 at 14:14
1

Doing this with ListView disable the ability to move the list with keyboard. – lubrum Jul 07 '22 at 14:54

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

6 Answers6

Linked

Related