JavaFX - Why is there a line under each control and how to delete it?

Question

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

When I focus on any of the elements, the line disappears. Why is this happening and how can I get rid of it?

the 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

Do this with a background paste. I looked at the file modena.cssthat is available in jfxrt.jaron com.sun.javafx.scene.control.skin.modena. Your JavaFX project will definitely include this JAR, so feel free to browse the file yourself.

.button , , , , :

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

: , , , . "bottom" sample.css, -1 0:

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

, , modena.css button:focus, CSS:

.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;
}

:

, - .

, , , :

.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 */
}

---

"" JavaFX:

• JavaFX CSS
• SceneBuilder
• modena.css,

Answer 2

, Modena.css( Caspian.css, JavaFX 7).

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;
}

, :

• (.. Modena.css/Caspian.css). , .
• , , . , , .

1:

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

2:

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