如何为JavaFX的ScrollPane设置样式且不影响其子节点？

我明白你的痛点——直接给.scroll-pane设置焦点相关CSS会不小心让内部按钮、输入框这些子控件也丢失焦点高亮，这确实很烦人。问题出在-fx-focus-color和-fx-faint-focus-color是可继承的CSS属性，你给父容器设置后，所有子节点都会继承这个值，自然就影响到内部控件了。

要解决这个问题，核心是只针对ScrollPane自身的焦点高亮做修改，不触碰那些会被子节点继承的属性，或者精准重置子节点的样式（不过前者更优雅）。下面给你两种可行的方案：

方案1：直接消除ScrollPane的焦点环（不影响子节点） #

这种方法不需要修改继承属性，而是通过调整ScrollPane在聚焦状态下的背景和内边距，让它看起来和未聚焦时完全一致，从而隐藏焦点高亮：

.scroll-pane {
    -fx-background-color: transparent;
}

.scroll-pane:focused {
    /* 让聚焦时的背景与非聚焦状态一致 */
    -fx-background-color: transparent;
    /* 重置内边距，消除默认的焦点环占位 */
    -fx-background-insets: 0;
}

这个方案的好处是完全不会影响子节点，因为我们没有修改任何会继承的属性，只是调整了ScrollPane自身的外观。在JavaFX默认的Modena主题下，这个方法可以完美隐藏ScrollPane的焦点高亮，同时保留内部按钮的正常焦点样式。

方案2：保留焦点属性设置，但重置子节点的继承值 #

如果你一定要用-fx-focus-color来实现，可以在设置ScrollPane的样式后，给所有子节点重置焦点颜色为默认值。这种方法需要明确指定子控件类型，适合子节点类型固定的场景：

/* 设置ScrollPane的焦点高亮为透明 */
.scroll-pane:focused {
    -fx-background-color: transparent;
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}

/* 重置内部按钮的焦点颜色为默认值 */
.scroll-pane .button {
    -fx-focus-color: derive(-fx-base, 20%);
    -fx-faint-focus-color: derive(-fx-base, 10%);
}

/* 如果有其他子控件（比如TextField），也需要单独重置 */
.scroll-pane .text-field {
    -fx-focus-color: derive(-fx-base, 20%);
    -fx-faint-focus-color: derive(-fx-base, 10%);
}

不过这种方法需要你手动覆盖所有可能的子控件类型，相对繁琐，所以优先推荐方案1。

内容的提问来源于stack exchange，提问作者Christopher Riches