Question

我正在TextField工作，只是得到一个奇怪的＆＃34;额外的边界＆＃34;我无法确定它的来源。

我的用户界面看起来像这样（额外的边框是灰色的，普通的边框我在我的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），我在以下链接中找到了：

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上的重复边框

1 个答案: