如何设置JavaFX TextField的外观使其类似于iOS？

Question

如何设置JavaFX TextField的外观使其类似于iOS？

我想使用非圆角，插图/填充，颜色和提示文字（包括字体）。

Answer 1

您可以使用以下CSS规则更改TextField的外观以匹配iOS：

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

我相信CSS规则是不言自明的，您可以轻松进行更改。 我使用＃D7D6DC颜色作为边框颜色来匹配图像中的颜色，而且-fx-background-insets是modenas.css

中使用的默认值。

结果：

P.S 我看不到图像中的边框（左和右）是否存在，以防您只想显示上下边框，您也可以通过-fx-border-width : 1 0 1 0;来做到这一点。除了字体大小和字体外，您还可以使用-fx-font-size和-fx-font-family。 iOS使用的字体为San Francisco。