Textfield CSS styling using JavaFx

Question

I\'m trying to style some textfields using JavaFX, but I\'m not getting desired results. My goal is to have the textfield be represented by a singular underline. Here\'s my

Answer 1

Since you only want an underline, the minimum things you will need are

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

This will change the border color to grey, set the border width to 0 for everything but the bottom border, and back the textfield's background transparent so it is not white.

Answer 2

The following works for me:

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

The following test harness for this

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

produces