Remove borders from TextField

Question

Is there a way completely to remove the borders from TextField? For example I wan to display the text from this text:

TextField chartTitle = new TextField("Soem text");
        chartTitle.setEditable(false);
        chartTitle.setStyle("-fx-focus-color: transparent;");

Answer 1

Try adding this to your CSS:

.text-field {
    -fx-text-box-border: transparent;
}

If you also want to remove the focus ring, add (similar to what you have):

.text-field:focused {
    -fx-focus-color: transparent;
}

Unfortunately, this will only remove the visible border, the insets will still be there. To remove completely, you have to add quite some CSS (easiest is to copy & paste from caspian.css).

Something like:

.text-field {
    -fx-background-color: -fx-control-inner-background;
    -fx-background-insets: 0;
    -fx-padding: 1 3 1 3;
}