如何设置 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 中使用的默认值

结果 ：

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