使用 JavaFx 的文本字段 CSS 样式答案

【问题标题】：Textfield CSS styling using JavaFx使用 JavaFx 的文本字段 CSS 样式
【发布时间】：2018-03-30 11:16:47
【问题描述】：

我正在尝试使用 JavaFX 设置一些文本字段的样式，但没有得到想要的结果。我的目标是让文本字段由单数下划线表示。这是我的 CSS：

.text-field{
   -fx-font-family: "Quicksand";
   -fx-font-size: 18;
   -fx-padding: 1,1,1,1;
   -fx-border-color: grey;
   -fx-border-width: 2;
   -fx-border-radius: 1;
   -fx-border: gone;
   -fx-background-color: transparent;
   -fx-text-fill: grey;
}

我已经研究过这个问题，但我找到的类似问题的答案并没有真正包含足够的信息来重现并正确应用于我的程序。我对 CSS 样式不是很了解，这无济于事。我尝试使用结果最少的插图。感谢您提供的任何答案！

【问题讨论】：

您为什么不创建一个最小的可运行示例并将其添加到您的问题中？

标签： css javafx textfield

【解决方案1】：

以下对我有用：

/* File style.css */

.text-field {
    -fx-background-color: -fx-text-box-border, -fx-background ;
    -fx-background-insets: 0, 0 0 1 0 ;
    -fx-background-radius: 0 ;
}
.text-field:focused {
    -fx-background-color: -fx-focus-color, -fx-background ;
}

以下测试工具

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class TextFieldStyleTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        GridPane root = new GridPane();
        root.setHgap(10);
        root.setVgap(5);
        for (int row = 0 ; row < 4; row++) {
            for (int col = 0 ; col < 2; col++) {
                root.add(new TextField(), col, row);
            }
        }
        root.setPadding(new Insets(5));
        Scene scene = new Scene(root);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

生产

【讨论】：

谢谢你，还没有足够高的代表来支持你的帖子。对不起！

【解决方案2】：

由于您只需要下划线，因此您需要的最少内容是

.text-field {
  -fx-border-color: grey;
  -fx-border width: 0 0 1 0; // top, right, bottom, left
  -fx-background-color: transparent;
}

这会将边框颜色更改为灰色，将除底部边框之外的所有内容的边框宽度设置为 0，并将文本字段的背景设置为透明，使其不是白色。

【讨论】：