Textfield CSS Styling Using Javafx

Textfield CSS styling using JavaFx

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

JavaFX TextField CSS

Try this in your CSS file:

.text-field {
    -fx-background-color: #a9a9a9 , white , white;
    -fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
}

.text-field:focused {
    -fx-background-color: #a9a9a9 , white , white;
    -fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
}

How do I style a JavaFX TextField to look like an iOS one?

You can change the TextField appearance to match the iOS using the CSS rules below :

#ios-field {
    -fx-background-color: white;
    -fx-border-color : #D7D6DC;
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 0;
    -fx-padding: 4 7 4 15 ;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
}

#ios-field:focused {
    -fx-border-color : #D7D6DC;
    -fx-background-color: white;
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 0;
    -fx-padding: 4 7 4 15 ;
} 

I believe the CSS rules are self-explanatory and it will be easy for you to make changes.
I used the #D7D6DC color as a border color to match the one in your image also the -fx-background-insets are the default values used in modenas.css

Result :

P.S
I can't see if the border (LEFT and RIGHT) in your image exists in case you only want to display the upper and bottom border you can do that as well by -fx-border-width : 1 0 1 0;. In addition for font size and family you can use -fx-font-size and -fx-font-family. The font used for iOS is San Francisco.

JavaFX CSS Styling from Java

You replace all the style classes of the node with a single style class: text-field.

Take a look at modena.css to see that the style of TextFields is defined in rules for style class text-input.

These rules are also the only place where the CSS variable -fx-focus-color is used for TextFields. Since you make sure those rules are no longer applied you don't see any visible effect when modifying the -fx-focus-color variable.

If you do want to keep the parts of the old style you should not remove the style classes that are added when creating the node and modify properties that don't suit your needs in your own style. If you clear the style classes you're responsible for rebuilding the look from scratch.

JavaFX TextArea style with css

TextArea has an additional border/background on its content. To change/get rid of it, you need an additonal style in your css.

Something like

.text-area:focused .content {
    -fx-background-color:  white;
}

not sure if that's safe enough: it is not documented (or at least I could not find any doc for it), only available as implementation, f.i. in the extracted modena.css

---

Related Topics