Как удалить границы Java FX Accordion по умолчанию?

Question

У меня есть простая форма, в которой есть аккордеонный контейнер с 2 элементами.
Я хочу удалить или изменить границы Аккордеона по умолчанию.

Мой FXMLDocument.fxml файл:

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" styleClass="form" stylesheets="@styles.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/10.0.1">
    <children>
      <Accordion layoutX="100.0" layoutY="75.0" prefHeight="250.0" prefWidth="400.0">
        <panes>
          <TitledPane styleClass="acc-titled-pane" text="Option 1">
            <content>
                <AnchorPane prefHeight="180.0" prefWidth="200.0" styleClass="acc-pane-body">
                </AnchorPane>
            </content>
          </TitledPane>
          <TitledPane styleClass="acc-titled-pane" text="Option 2">
            <content>
                <AnchorPane prefHeight="180.0" prefWidth="200.0" styleClass="acc-pane-body">
                </AnchorPane>
            </content>
          </TitledPane>
        </panes>
      </Accordion>
    </children>
</AnchorPane>

Мой styles.css файл:

.form {
    -fx-background-color: lightgreen;
}
.acc-titled-pane {
    -fx-border-color: transparent;
}
.acc-pane-body {
    -fx-background-color: lightgreen;
    -fx-border-color: transparent;
}

Как видите, я сделал все границы прозрачными, но все еще есть некоторые границы: Я перепробовал много правил CSS, но ни одно из них не помогло мне.

Answer 1

Прежде всего, вы должны оформить подкласс .content в TitledPane ( docs ).

Кроме того, вы должны установить -fx-border-width вместо -fx-border-color, поскольку даже прозрачность приведет к тому, что родительский фон просвечивает:

Если вы установите ширину границы подкласса контента на 0, это должно решить вашу проблему:

.acc-titled-pane .content {
    -fx-border-width: 0;
}

Результат будет: