如何在 JavaFX 中使用 CSS 在 JFXTextField 或 TextField 中获取圆角

Question

我正在使用 JavaFX 构建一个应用程序，并且我有一个带有 JFXTextFields 和 JFXComboBoxes 的表单。我需要把它们像圆角一样圆起来，如下图。

像这样：

我尝试了以下 CSS 代码：

.jfx-text-field {
    -fx-border-radius: 20px;
    -fx-background-radius: 20 20 20 20;
    -fx-border-color: #609;
}

但结果是这样的：

那么如何在 JavaFX 中使用 CSS 舍入文本字段和组合框？

Answer 1

JFoenix 使用的 .css 文件可以在 JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls 找到。属于 JFXTextField 的 .css 文件是 jfx-text-field.css，属于 JFXComboBox 的 .css 文件是 jfx-combo-box.css.

这些文件中定义的样式必须根据要求在用户定义的 .css 文件中进行调整，例如：

.jfx-text-field,
.jfx-combo-box {
    -fx-border-radius: 20px;
    -fx-border-color: #CCCCCC;
}

.jfx-text-field {
    -fx-padding: 0.333333em 1em 0.333333em 1em;
}

.jfx-combo-box {
    -fx-padding: 0em 1em 0em 1em;
}

.jfx-text-field > .input-line,
.jfx-combo-box > .input-line {
    -fx-background-color: transparent;
    -fx-pref-height: 0px;
    -fx-translate-y: 0px;
}

.jfx-text-field > .input-focused-line,
.jfx-combo-box > .input-focused-line {
    -fx-background-color: transparent;
    -fx-pref-height: 0px;
}

在第一个块中定义了边框半径和边框颜色，在接下来的两个块中定义了填充。在最后两个块中，输入行被禁用，这在上面最初发布的屏幕截图中仍然可见。结果是：

发布的样式仅为示例，必须根据您的要求进行调整/优化。

如何在 JavaFX 中使用 CSS 在 JFXTextField 或 TextField 中获取圆角

How to get the Round Corners in JFXTextField or TextField using CSS in JavaFX

css

javafx

combobox

textfield

jfoenix