去除 javafx.scene.control.TextField 上的重复边框

Question

我正在研究一个 TextField，只是得到一个奇怪的 "extra border" 我无法确定它来自哪里。

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

我认为这不相关，但为了提供信息，我跟踪了滑块和文本字段之间的一致性，向文本字段添加了一个侦听器，以根据在文本字段中输入：

@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），我在下面找到 link:

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
}

去除 javafx.scene.control.TextField 上的重复边框

Get rid of duplicated border on javafx.scene.control.TextField

css

java

border

textfield

javafx-8