自定義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

基本上適用於我。

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

對於頂部邊框，這種 「嵌套背景」 替換您 -fx-background-color