如何通过CSS样式表修改JavaFX按钮为白色并保留光晕效果？

咱们先拆解下你遇到的两个问题的根源：

• 直接设置-fx-background-color: #FFFFFF会彻底覆盖按钮的默认背景样式体系，而焦点光晕是和默认样式绑定的，单靠-fx-focus-color自然没法恢复；
• 用-fx-color: #FFFFFF时，JavaFX的默认按钮样式会对这个基础色做色调混合或透明度处理，所以最终显示成了灰色而非纯白。

下面给你两种可行的解决方案，按需选择就行：

方案一：修改基础色调（推荐） #

通过-fx-base设置按钮的基础白色，这样能完整保留所有默认交互样式（包括光晕、hover、按压效果），再配合焦点颜色调整就能完美实现需求：

.button {
    -fx-base: #FFFFFF; /* 将按钮基础色设为纯白 */
    -fx-focus-color: #039ED3; /* 焦点光晕的主色调 */
    -fx-faint-focus-color: #039ED322; /* 带透明度的淡光晕色 */
}

这个方法的优势是完全沿用JavaFX的原生样式逻辑，所有交互状态的效果都会自动适配白色背景，不用额外写复杂的伪类样式。

方案二：自定义背景+保留焦点样式 #

如果你需要更精细的背景控制，也可以手动设置背景色，同时针对:focused伪类单独配置，确保光晕正常显示：

.button {
    -fx-background-color: #FFFFFF;
    -fx-border-color: #cccccc; /* 可选：给白色按钮加个边框，避免和页面背景融合 */
}

.button:focused {
    -fx-background-color: #FFFFFF; /* 保持焦点状态下的白色背景 */
    -fx-focus-color: #039ED3;
    -fx-faint-focus-color: #039ED322;
    -fx-background-insets: 0, 0, 1, 2; /* 调整背景内边距，让光晕不被遮挡 */
}

这种方式适合需要完全自定义背景，但又不想丢失焦点光晕的场景。

你可以试试这两种方法，应该能得到纯白背景且带有蓝色光晕的按钮效果~

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