如何将 JavaFX TextField 设置为看起来像 iOS 的样式？

Question

如何设置 JavaFX TextField 的样式使其看起来像 iOS？

我想要非圆角、insets/padding、颜色和提示文本（包括字体）。

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.

如何将 JavaFX TextField 设置为看起来像 iOS 的样式？

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

java

javafx

styling

textfield