Customizing TextField - JavaFX

Question

How can I make TextField looks like this? Basically, this is an area from Windows 8 calculator.

I created a TextField, but it doesn't accept properties written in a style .css file.

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

I can't find out how to set up a top border.

Answer 1

That basically works for me. For the top border, replace your -fx-background-color with this "nested background":

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