时间戳

首页 > 解决方案 > 如何设置 JavaFX TextField 的样式以使其看起来像 iOS？

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

问题描述

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

图片

我想要非圆角、插入/填充、颜色和提示文本（包括字体）。

标签： javajavafxtextfieldstyling

解决方案

您可以使用以下 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。

推荐阅读