CODEWITHSUNDEEP
javajavafxtextfieldstyling
airsquared
airsquared

Reputation: 633

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

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

image

I want to have the non-rounded corners, insets/padding, the colors, and the prompt text(including the font).

Upvotes: 2

Views: 793

Answers (1)

JKostikiadis
JKostikiadis

Reputation: 2917

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 :

enter image description here

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.

Upvotes: 2

Related Questions