自定义文本字段 - JavaFX

Question

如何使 TextField 看起来像这样？基本上，这是 Windows 8 计算器的一个区域。

我创建了一个 TextField，但它不接受以样式 .css 文件编写的属性。

-fx-background-color: #2f2d2f;
-fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
-fx-border-width: 9px;
-fx-font-size: 125px;
-fx-text-fill: #ffffff;
-fx-display-caret: false;
-fx-background-radius: 0;

我不知道如何设置顶部边框。

Answer 1

这基本上对我有用。对于顶部边框，将您的 -fx-background-color 替换为此“嵌套背景”：

-fx-background-color: #2fa02f, #2f2d2f;
-fx-background-insets: 0, 1 0 0 0 ;

SSCCE：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class TextFieldStyleTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        TextField tf = new TextField();
        tf.setId("textField");
        StackPane root = new StackPane(tf);
        Scene scene = new Scene(root, 400, 400, Color.BLACK);
        scene.getStylesheets().add("text-field-style-test.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

文本字段样式文本.css：

.root {
    -fx-background-color: black ;
    -fx-padding: 20 20 20 20 ;
}
#textField {
    -fx-background-color: #2fa02f, #2f2d2f;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 125px;
    -fx-text-fill: #ffffff;
    -fx-display-caret: false;
    -fx-background-radius: 0;
    -fx-background-insets: 0, 1 0 0 0 ;
    -fx-padding: 1 ;

    -fx-alignment: center-right ;
}