在JavaFX中为按钮添加样式

Question

我在我的FXML文件中有一个Button，我通过以下CSS为它添加了样式

.button {
    -fx-background-color: linear-gradient(#ff5400, #be1d00);
    -fx-background-radius: 30;
    -fx-background-insets: 0;
    -fx-text-fill: white;
}

从图中可以看到，该按钮具有新的惊艳样式，但每当我点击它时，它仍然像以前一样，并且你无法确定它是否被点击了...

经过搜索，我在这个链接中找到了一种解决方案：Pressed CSS，但是如果你注意到，这是Web浏览器使用的CSS，而JavaFX不支持这种方法。

那么问题来了，怎么办呢？我想让当用户点击按钮时，它的外观发生变化。

- Elyas Hadizadeh

Answer 1

你需要在CSS中添加伪类状态pressed，并对其添加新的CSS，以区分当前按钮CSS与按下按钮时的CSS：

你需要在 CSS 中添加 :pressed 伪类状态，并为它添加新的 CSS，这将使得当前按钮 CSS 与按下按钮时的 CSS 有所区别：

(Two versions provided in case the level of simplification required is different)

.button:pressed {
    // Your new css
}

要在鼠标悬停在按钮上时改变样式，请使用：

.button:hover { 
    // Your new css
}

为了更好地理解您可以添加哪些样式来为按钮设置样式，您可以查看如何让按钮显示为已点击或选中？

- ItachiUchiha

---

谢谢，这是真的，但你有没有注意到当你把鼠标放在按钮上（在点击之前），按钮的外观会改变，然后每次点击它时，它都会再次改变。你能理解我想说什么吗？ - Elyas Hadizadeh

为此，您需要使用伪类hover，即.button:hover { ... }。CSS参考指南列出了所有组件的伪类和属性，例如Button。 - James_D

@James_D 谢谢伙计 - Elyas Hadizadeh

Answer 2

对于JavaFX上的ArrayLists，请尝试在CSS中使用以下内容来更改鼠标单击时的颜色：

.list-cell:selected { -fx-background-color: yellow; }

- dizad87