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;");
1
4
5/21/2014 10:25:54 AM

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;
}
10
5/21/2014 1:18:22 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon