JavaFX - Why there is a line under every Control element and how to remove it?

Question

I noticed that every element which inherits from the Control class has an underscore at the bottom. You can see it in the picture:

When I put a focus on any of items, the line disappears. Why does it happen and how can I get rid of that?

Code:

Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

sample.fxml

<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.ComboBox?>
<?import java.lang.String?>
<?import javafx.collections.FXCollections?>

<GridPane stylesheets="@sample.css"
          xmlns:fx="http://javafx.com/fxml"
          alignment="center">
    <HBox>
        <ProgressBar minWidth="100" progress="0.3"/>
        <Button text="Button"/>
        <Button text="Button"/>
        <Button text="Button"/>
        <ComboBox>
            <items>
                <FXCollections fx:factory="observableArrayList">
                    <String fx:value="String" />
                    <String fx:value="String" />
                    <String fx:value="String" />
                </FXCollections>
            </items>
        </ComboBox>
    </HBox>
</GridPane>

sample.css

.root {
-fx-background-color: gray;
}

Answer 1

It's to do with background insets. I had a look at the file modena.css which is available in the jfxrt.jar at com.sun.javafx.scene.control.skin.modena. Your JavaFX project will necessarily include this JAR, so feel free to take a look at the file yourself.

I looked at the style for .button and saw a line which I suspected might be causing this:

-fx-background-insets: 0 0 -1 0, 0, 1, 2;

The order of parameters goes: top, right, bottom, left. I decided to override the 'bottom' value in my sample.css, changing the -1 to 0:

.button {
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}

This solved the problem, but broke the focus highlight, so I copied and pasted the background insets from modena.css for button:focus, to give the following CSS file:

.root {
    -fx-background-color: grey;
}
.button {
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}
.button:focused {
    -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
}

The result is:

Left is a button without focus, right is with focus.

You can do a similar thing for most of the other controls you wish to change, however the progress bar is a bit different because two things need to change:

.progress-bar > .bar
{
    -fx-background-insets: 3 3 3 3;
                            /* ^ was 4 */
}
.progress-bar > .track
{
    -fx-background-insets: 0, 0 0 1 0, 1 1 1 1;
                                        /* ^ was 2 */
}

---

Some helpful things for "debugging" JavaFX are:

• JavaFX CSS Reference Guide
• SceneBuilder's inspection tool
• modena.css, as mentioned above

Answer 2

This is the default style provided by the global Modena.css stylesheet (or Caspian.css if you are still on JavaFX 7).

From Modena.css:

.button,
.toggle-button,
.radio-button > .radio,
.check-box > .box,
.menu-button,
.choice-box,
.color-picker.split-button > .color-picker-label,
.combo-box-base,
.combo-box-base:editable > .arrow-button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

If you don't like the default effect, you can:

1. Apply your own theme (i.e. create your own version of the whole Modena.css/Caspian.css). You would need to write a lot, but you have complete control.
2. Let the original theme apply, but you override parts of them using your own stylesheet. This is likely what you need.

Example 1:

.button{
    -fx-background-color: gray;
}

Example 2:

.root{
    -fx-inner-border: transparent;
}