CODEWITHSUNDEEP
cssjavafxcomboboxtextfieldjfoenix
H Athukorala
H Athukorala

Reputation: 853

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

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?

Upvotes: 2

Views: 1840

Answers (1)

Topaco
Topaco

Reputation: 49251

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.

Upvotes: 3

Related Questions