Style a regular javafx button and text-field?

Question

I'm using Time-4j-ui library, and somehow it includes a built-in Button and a text box which is Ugly and ruins all my design,

In my project I'm using Jfoenix material design components, and this built-in user-interface completely ruins my design, here is a view

I want to know if there is a way or some kind of hack to style this date-picker to JFXDatePicker, You can see JFXDatePicker in below:

However I managed to access first child of this view-group(which is the text-box) with picker.getChildren().get(0);, but I don't know if there is a way to style the text-box or something?

Thanks in advance

Indeed, `picker.getChildren().get(0)` is the text box, and at index position 1 the popup button. Have you also seen the built-in [css-file](https://github.com/MenoData/Time4J/blob/master/ui/src/main/resources/net/time4j/ui/javafx/calendar.css)? One css-property is associated with the text box: `calendar-editor-error`. You should probably also be able to set the style of the text box programmatically via: `getStyleClass().add(css-property-string)`. Would it help you if I define such a property in next release v4.28 so you can use it for the general case if the content of the text box is valid? — Meno Hochschild, Jun 16 '17 at 21:01

score 1 · Answer 1 · answered Jun 16 '17 at 21:30

You can style elements with CSS: The simple way is to use it directly, Like this:

Node node = picker.getChildren().get(0);
node.setStyle("-fx-border-color: #000;-fx-border-width: 2px;");

Or you can specify an external css file and use it, This way:

Node node = picker.getChildren().get(0);
node.getStyleClass().add("myTextBox");
picker.getStylesheets().add("main.css");

/*main.css:*/
.myTextBox{
  -fx-border-color: #000;
  -fx-border-width: 2px;
}

Style a regular javafx button and text-field?

1 Answers1