java - 摆脱 javafx.scene.control.TextField 上的重复边框

Question

我正在处理一个 TextField，只是得到一个奇怪的“额外边框”，我无法确定它的来源。

我的 UI 看起来像这样(额外的边框是灰色的，普通边框我在 CSS 中涂成红色用于调试):

FXML 摘录:

<HBox fx:id="sliderControlPane" styleClass="parameterSliderControlPane"
                    alignment="CENTER" visible="false">
    <Slider fx:id="parameterSliderControl" styleClass="parameterSliderControl"
                        prefWidth="195" />
    <Pane prefWidth="14"/>
    <TextField fx:id="parameterSliderControlValue" styleClass="parameterSliderControlValue" 
                        prefWidth="70"/>
</HBox>

CSS 摘录:

.parameterSliderControlPane {
    -fx-padding: 0.0 5.0 0.0 5.0;
}

.parameterSliderControlValue {
    -fx-border-color: #f00;
    -fx-border-radius: 8.0;
    -fx-font-size: 20.0;
    -fx-padding: 0.0 4.0 0.0 4.0;
    -fx-alignment: center-right;
}

.parameterSliderControl .track {
    -fx-padding: 4.0;
}

.parameterSliderControl .thumb {
    -fx-border-color: #aaa;
    -fx-border-radius: 12.0;
    -fx-background-color: #fff;
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-padding: 14.0;
}

我不认为它是相关的，但为了提供信息，我跟踪 slider 和文本字段之间的一致性，向文本字段添加一个监听器，以根据输入更新 slider 值或回滚文本字段值文本域:

@Override
public void initialize(URL location, ResourceBundle resources) {
    (...)
    this.parameterSliderControlValue.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
        if (!isNowFocused) {
            (...)
            //check wether input is valid
            //if yes, update slider value with text field value
            //if no, update text field value with slider value
        }
    }
}

我不明白为什么这个额外的边框会在文本字段边框的背景中弹出。它是否来自文本字段，我应该设置一些参数来隐藏它？或者它确实来自另一个我无法理解的 UI 元素？

我在官方 JavaFX CSS 引用页面 (https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html) 找不到任何可疑参数

谢谢!

Answer 1

根据@fabian 的评论，原来是由于默认主题 (modena.css)，我在以下链接中找到了它:

gist.github.com/maxd/63691840fc372f22f470

第 1266 行定义了 .text-input 条目，它负责重复的边框。它不直接定义边框参数，而是通过背景相关参数间接生成额外的边框:

.text-input {
    -fx-text-fill: -fx-text-inner-color;
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-cursor: text;
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}

针对我的特殊情况的解决方案是在我的 CSS 中覆盖 -fx-background-color。不过，最终的 CSS 是:

.parameterSliderControlValue {
    -fx-border-color: #f00;
    -fx-border-radius: 8.0;
    -fx-font-size: 20.0;
    -fx-padding: 0.0 4.0 0.0 4.0;
    -fx-alignment: center-right;
    -fx-background-color: transparent; //this line has been added to solve the problem
}