自定义TextField - 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

这基本上适合我。对于顶部边框，请使用此＆＃34;嵌套背景替换-fx-background-color＆＃34;：

-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);
    }
}

文本字段风格-text.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 ;
}