如何删除 JavaFX 按钮(选择时)的默认边框发光?

发布于 2024-11-08 21:10:50 字数 151 浏览 0 评论 0原文

我正在尝试删除选择 JavaFX 按钮时默认出现的边框发光(请参见下面的屏幕截图):

我也想使用 CSS 来执行此操作,而不是在主 JavaFX 脚本中以声明方式执行此操作。但是,我无法确定需要使用什么 CSS 属性(呃,设置为 0?)才能删除该边框。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

疯狂的代价 2024-11-15 21:10:50

设置-fx-focus-color

确保您查看答案的所有更新,以帮助您选择适合您问题的解决方案。

要从代码内的任何控件中删除聚焦环显示:

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

要删除所有控件的聚焦环,请应用样式表:

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

要仅删除所有按钮的聚焦环,请使用:

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

我找到 -fx-focus-color< /code> 属性设置比依赖一些奇怪的插图组合来删除对焦环更直接。

此外,您可以使用相同的设置将对焦环更改为不同的颜色,例如-fx-focus-color: firebrick

2015 年 1 月 20 日更新:添加了 -fx-faint-focus-color

JavaFX 8 附带了新的默认用户代理样式表 (modena)。这个新的用户代理样式表附带了一个用于焦点突出显示的附加设置:-fx-faint-focus-color。对于Java 8应用程序,需要将-fx-focus-color-fx-faint-focus-color都设置为透明,以消除对焦环的所有痕迹。请参阅good4m对此问题的回答。

2015 年 12 月 10 日更新:保持特定控件的精确渲染

如果您仅按照本答案中之前的建议将焦点颜色设置为透明,则对于某些控件,您可能会看到控件聚焦时之间存在一些细微的差别以及何时不是。对于许多应用程序来说,这不会成为问题,将焦点颜色设置为透明就足够了。

有关更多信息和替代解决方案,请查看 James_D 对 从 JavaFX 输入字段中删除蓝框的回答 和 Jens Deter 关于 如何摆脱 JavaFX 中的焦点突出显示。请注意,不幸的是,Jens Deter 博客的链接有一些烦人的弹出窗口。

2023 年 9 月更新:为更广泛的控件保持精确渲染

要让聚焦的事物看起来完全像未聚焦的事物,请定义 :focused聚焦和未聚焦时的样式具有相同的 CSS 规则。下面的 CSS 规则演示了许多常见 JavaFX 控件的这种方法。

与仅设置 -fx-focus-color 和 -fx-faint-focus-color 值不同,这些规则将确保焦点项目大小、填充、无论项目是否获得焦点,背景等都保持不变。

JavaFX通常通过附加分层背景来实现焦点指示。为了渲染聚焦环,需要调整控件背景的数量和大小,如果仅将聚焦环设置为透明,则会导致控件的渲染略有不同。相反,如果您重写焦点 CSS 规则,以便它们不会以任何方式调整控件的背景,则当控件获得焦点时,控件的外观将与未获得焦点时的外观相同。

下面的样式表是通过在 javafx 控件 jar 文件中找到的 modena.css 样式表中重新定义许多 :focused CSS 规则而创建的。设置新规则,以便将 :focused 规则定义为与非焦点规则相同的值。

我通过复制粘贴并手动更改项目来生成样式表。它尚未经过充分测试,因此可能存在一些错误(如果是这样,请随时编辑帖子并更正它们)。

该列表目前故意不完整,但如果您有一条对于此处未演示的特定 JavaFX 控件很重要的规则,并且您确定您的规则是正确且最佳的,请编辑示例样式表以添加其他规则。特别是,它省略了删除表格的样式焦点处理,因为这可能非常复杂。这或许可以通过单独的问答来解决。

该模板使用的 JavaFX 版本是 20.0.2。未来的 JavaFX 版本可能有不同的规则,以下规则需要适应。

我认为在大多数情况下从物体上取下聚焦环不是一个好主意,所以我建议您不要这样做。特别是,不建议删除整个应用程序中所有控件的焦点规则,因为这可能会让用户感到困惑。但如果这是您想要的功能,您可能希望有选择地将以下 CSS 规则的摘录应用到您想要调整的控件上。

/* ====   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:focused,
.tree-table-view:focused,
.html-editor:contains-focus {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}

.scroll-pane:focused,
.split-pane:focused {
    -fx-background-color: -fx-box-border, -fx-background;
}

/* ====   PILL BUTTONS   ==================================================== */

.button.left-pill:focused,
.toggle-button.left-pill:focused {
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
}
.button.center-pill:focused,
.toggle-button.center-pill:focused {
    -fx-background-radius: 0;
    -fx-background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 0, 2 2 2 1 ;
}
.button.right-pill:focused,
.toggle-button.right-pill:focused {
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
}

/* ====   SELECTED TOGGLE   ================================================= */

.toggle-button:selected:focused {
    -fx-background-color:
            -fx-shadow-highlight-color,
            linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
            linear-gradient(to bottom,
            derive(-fx-color, -22%) 0%,
            derive(-fx-color, -13%) 20%,
            derive(-fx-color, -11%) 50%);
    -fx-background-insets: 0 0 -1 0, 0, 1;
}

/* ====   RADIO             ================================================= */

.radio-button:focused > .radio  {
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
}

/* ====   HYPERLINK         ================================================= */

.hyperlink:focused {
    -fx-border-color: transparent;
    -fx-border-width: 0px;
}

/* ====   SPLIT MENU BUTTON ================================================= */

.split-menu-button:focused {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-background-radius: 3, 3;
}

.split-menu-button:focused > .label {
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1 0 1 1, 2 1 2 2;
    -fx-background-radius: 2 0 0 2, 1 0 0 1;
}
.split-menu-button:focused > .arrow-button {
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1, 2;
    -fx-background-radius: 0 2 2 0, 0 1 1 0;
}

/* ====   TOOLBAR           ================================================= */

.tool-bar-overflow-button:focused > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
}

/* ====   SCROLLBAR         ================================================= */

.scroll-bar:horizontal:focused {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 1 0 1 0;
}
.scroll-bar:vertical:focused {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 0 1 0 1;
}

/* ====   TEXT INPUT        ================================================= */

.text-input:focused {
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-prompt-text-fill: transparent;
}

/* ====   TEXT AREA        ================================================= */

.text-area:focused .content {
    -fx-background-color:
            linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
    -fx-background-insets: 0;
    -fx-background-radius: 2;
}

/* ====   MENU             ================================================= */

.menu:focused > .right-container > .arrow {
    -fx-background-color: -fx-mark-color;
}

/* ====   MENU ITEM        ================================================= */

.menu-item:focused {
    -fx-background: -fx-selection-bar;
    -fx-background-color: transparent;
    -fx-text-fill:  -fx-text-background-color;
}
.menu-item:focused > .label {
    -fx-text-fill: -fx-text-base-color;
}

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:focused,
.tree-table-view:focused,
.html-editor:contains-focus {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}

.scroll-pane:focused,
.split-pane:focused {
    -fx-background-color: -fx-box-border, -fx-background;
}

/* ====   PILL BUTTONS   ==================================================== */

.button.left-pill:focused,
.toggle-button.left-pill:focused {
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
}
.button.center-pill:focused,
.toggle-button.center-pill:focused {
    -fx-background-radius: 0;
    -fx-background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 0, 2 2 2 1 ;
}
.button.right-pill:focused,
.toggle-button.right-pill:focused {
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
}

/* ====   SELECTED TOGGLE   ================================================= */

.toggle-button:selected:focused {
    -fx-background-color:
            -fx-shadow-highlight-color,
            linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
            linear-gradient(to bottom,
            derive(-fx-color, -22%) 0%,
            derive(-fx-color, -13%) 20%,
            derive(-fx-color, -11%) 50%);
    -fx-background-insets: 0 0 -1 0, 0, 1;
}

/* ====   RADIO             ================================================= */

.radio-button:focused > .radio  {
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
}

/* ====   HYPERLINK         ================================================= */

.hyperlink:focused {
    -fx-border-color: transparent;
    -fx-border-width: 0px;
}

/* ====   SPLIT MENU BUTTON ================================================= */

.split-menu-button:focused {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-background-radius: 3, 3;
}

.split-menu-button:focused > .label {
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1 0 1 1, 2 1 2 2;
    -fx-background-radius: 2 0 0 2, 1 0 0 1;
}
.split-menu-button:focused > .arrow-button {
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1, 2;
    -fx-background-radius: 0 2 2 0, 0 1 1 0;
}

/* ====   TOOLBAR           ================================================= */

.tool-bar-overflow-button:focused > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
}

/* ====   SCROLLBAR         ================================================= */

.scroll-bar:horizontal:focused {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 1 0 1 0;
}
.scroll-bar:vertical:focused {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 0 1 0 1;
}

/* ====   TEXT INPUT        ================================================= */

.text-input:focused {
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-prompt-text-fill: transparent;
}

/* ====   TEXT AREA        ================================================= */

.text-area:focused .content {
    -fx-background-color:
            linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
    -fx-background-insets: 0;
    -fx-background-radius: 2;
}

/* ====   MENU             ================================================= */

.menu:focused > .right-container > .arrow {
    -fx-background-color: -fx-mark-color;
}

/* ====   MENU ITEM        ================================================= */

.menu-item:focused {
    -fx-background: -fx-selection-bar;
    -fx-background-color: transparent;
    -fx-text-fill:  -fx-text-background-color;
}
.menu-item:focused > .label {
    -fx-text-fill: -fx-text-base-color;
}
难以启齿的温柔 2024-11-15 21:10:50
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
祁梦 2024-11-15 21:10:50

如果您想在 JavaFX 8 中删除此聚焦环,请使用 modena.css 中的 .button 选择器样式重写 :focus 选择器。

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

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;
}
少女情怀诗 2024-11-15 21:10:50

有几种方法可以做到这一点。您可以尝试其中任何一个。

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

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

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

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;
}
久隐师 2024-11-15 21:10:50

Stelios Adamantidis 的答案是正确的,即

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

这是我的解释:

例如,定义

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

似乎定义了四层背景颜色,其中红色作为最后一层的颜色。

例如,定义

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

设置每个颜色层所有角的半径。这里,红色层的所有角点的半径为0,绿色层的所有角点的半径为1,依此类推。

例如,定义

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

设置颜色层的填充。您还可以设置负值,然后颜色将围绕控件。

按钮的默认值似乎是这样的:

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

将 insets 的第一个值设置为 0 会将发光颜色隐藏在第二个颜色后面。

有关 JavaFX CSS 的更多信息,您可以在这里找到:
http://docs.oracle.com/ javafx/2/api/javafx/scene/doc-files/cssref.html

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

一身仙ぐ女味 2024-11-15 21:10:50

要完全禁用此按钮,请选择 do:

button.setFocusTraversable(false);

它比在 css 中编辑要干净得多。

To completely disable this button selecting do:

button.setFocusTraversable(false);

It's much cleaner than editing in css.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文