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

user_9403408 0
Viewed 1359

I am building an application using JavaFX and I have a form with JFXTextFields and JFXComboBoxes. I need to round them like round corners as the following picture.

Like this:

Rounded Text Field

I have tried the following CSS code:

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

But the result is this:

Rounded Text Field I Got

So how to round the text fields and combo boxes using CSS in JavaFX?

jfoenix javafx textfield combobox css
1 Answers

The .css-files used by JFoenix can be found at JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls. The .css-file belonging to JFXTextField is jfx-text-field.css and the .css-file belonging to JFXComboBox is jfx-combo-box.css.

The styles defined in these files have to be adapted in a user-defined .css-file according to the requirements, e.g.:

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

In the first block the border-radius and border-color are defined and in the following two blocks the padding. In the last two blocks the input line is disabled, which is still visible in the originally posted screenshot above. The result is:

enter image description here

The posted style is only an example and has to be adapted / optimized according to your requirements.

user_90140970
Related