Question

你好，StackOverflow用户，这是我的第一篇帖子/问题，希望我没有违反任何规则/等。

不幸的是我无法发布图片，但我会在此处提供参考。 http://i.imgur.com/M0uckkg.jpg（按钮点击前）

OT：在上图中，我试图让按钮的背景在文本旁边完全透明。

http://i.imgur.com/bFOEOVC.jpg（点击按钮后）

一切正常，直到我点击按钮，然后阴影出现在侧面。

这是我尝试过的......

CSS

.toggle-button {
    -fx-text-fill: black;
    -fx-base: transparent;
    -fx-background: transparent;
    -fx-focus-color: transparent;
    -fx-border-color: transparent;
    -fx-effect: null;
}

.toggle-button:selected {
    -fx-text-fill: black;
    -fx-base: transparent;
    -fx-background: transparent;
    -fx-focus-color: transparent;
    -fx-border-color: transparent;
    -fx-effect: null;
}

java代码只是一个带有ToggleButton的简单应用程序。

提前特别致谢！ - 巴特

Answer 1

我不建议仅为一个控件修改主调色板（-fx-base和其他）。如果您尝试为所有这些设置样式，这是有道理的。

查看modena.css：

中的定义方式

.toggle-button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, 
        -fx-inner-border, -fx-body-color;
    -fx-text-fill: -fx-text-base-color;
}
.toggle-button:selected {
    -fx-background-color: -fx-shadow-highlight-color,
        linear-gradient(to bottom, derive(-fx-outer-border, -20%), ...),
        linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...);
}
.toggle-button:selected:focused {
    -fx-background-color: -fx-focus-color, 
        linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...),
        -fx-faint-focus-color, linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...);
}

您需要更改所有内容：-fx-shadow-highlight-color，-fx-outer-border，...

相反，我只是根据您的要求覆盖切换按钮的样式：

.toggle-button,
.toggle-button:focused,
.toggle-button:selected,
.toggle-button:selected:focused {
    -fx-background-color: transparent;
    -fx-text-fill: black;
}

注意我已经编辑了我的答案，因为正如@eckig建议的那样，将相同的颜色应用于不同的逗号分隔值是多余的。

Answer 2

特别感谢你们，Jose和他们。 Eckig。我设法用您的建议编辑我的代码，并立即修复了问题！

以下是任何人的参考资料。

按钮代码

ToggleButton button= new ToggleButton("Login");
button.getStyleClass().add("custom");

CSS

.custom,
    custom:selected {
    -fx-background-color: transparent;
    -fx-text-fill: black;
}

Answer 3

如果你想完全删除类似按钮的光学元件，我建议你删除所有现有的样式，并添加自己的样式类作为唯一的样式类：

ToggleButton toggleButton = new ToggleButton("Login");
toggleButton.getStyleClass().setAll("my-custom-button");

现在您只能应用所需的样式：

.my-custom-button {}

JavaFX ToggleButton Shadow

3 个答案: