来自Java的JavaFX CSS样式

Posted 2021-03-28

我想为一个元素分配一个样式类。

我有一个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");

我遇到的问题是“：focus”样式没有应用于此元素。我究竟做错了什么？

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

怎么解决这个问题？

答案

使用单个样式类替换节点的所有样式类：text-field。

看一下modena.css，看看TextFields的样式是在样式类text-input的规则中定义的。

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

如果您确实希望保留旧样式的部分，则不应删除在创建节点时添加的样式类，并修改不适合您自己样式的属性。如果清除样式类，则负责从头开始重建外观。

另一答案

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