JavaFX CSS 样式来自 Java

Question

我想为元素指定样式 class。

我有一个 css:

.text-field{
    -fx-background-color: #333333;
    -fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
    -fx-text-fill: white; 
    -fx-prompt-text-fill: white;
    -fx-font-family: Trebuchet MS;
    -fx-font-size: 14px;
}

.text-field:focused{
    -fx-focus-color: white;
    -fx-prompt-text-fill: white;
    -fx-highlight-fill:  grey ;
}

我使用的 java 代码：

JFXTextField textField = new JFXTextField();                    
textField.getStylesheets().add(this.getClass().getResource("/css/TextField_Style_Sheet.css").toExternalForm());
textField.getStyleClass().clear();
textField.getStyleClass().add("text-field");

我遇到的问题是“:focused”样式没有应用到这个元素。我做错了什么？

已经在元素中直接使用 scenebuilder 对其进行了测试，"Focus Color" 和 "UnFocus Color" 选项中的设置似乎覆盖了 text-field:focused 样式。由于 JFXTextField 是在运行时创建的，因此默认的 Focus Color 似乎覆盖了 css text-field:focused 样式。

如何解决？

Answer 1

您将节点的所有样式 class 替换为单个样式 class：text-field。

查看 modena.css 以了解 TextFields 的样式在样式 class text-input.

的规则中定义

这些规则也是唯一使用CSS变量-fx-focus-color的地方TextField秒。由于您确保不再应用这些规则，因此在修改 -fx-focus-color 变量时看不到任何可见的效果。

如果你确实想保留旧样式的部分，你不应该删除创建节点时添加的样式 classes 并且修改不适合你自己样式的属性.如果您清除样式 classes，您将负责从头开始重建外观。

Answer 2

将 focused 更改为 hover 像这样： .text-field:悬停{ ..}

JavaFX CSS 样式来自 Java

JavaFX CSS Styling from Java

css

javafx

stylesheet