【问题标题】:How do you change the background color of a TextField without changing the border in javafx?如何在不更改 javafx 边框的情况下更改 TextField 的背景颜色?
【发布时间】:2015-02-26 07:07:18
【问题描述】:

我正在尝试将我的 TextField“colorBox0”的背景颜色更改为“value0”,但它摆脱了边框。
这是我的代码的简化版本:

   static Paint value0 = Paint.valueOf("FFFFFF");
   TextField colorBox0;
   colorBox0.setBackground(new Background(new BackgroundFill(value0, CornerRadii.EMPTY, Insets.EMPTY)));

非常感谢任何帮助
谢谢

【问题讨论】:

  • 哇,这令人沮丧...

标签: java javafx javafx-2 textfield background-color


【解决方案1】:

带有颜色转换的优雅解决方案:

static Paint black = Paint.valueOf(Integer.toHexString(Color.BLACK.hashCode()));
TextField textfield;
textField.setStyle(
"-fx-control-inner-background: #"+black.toString().substring(2));

【讨论】:

    【解决方案2】:

    我发现你可以使用 to string 方法和 substring 方法从一个字符串和一个变量中构造一个 css 代码字符串,如下所示:

    colorBox0
    .setStyle("-fx-control-inner-background: #"+value0.toString().substring(2));
    

    【讨论】:

    【解决方案3】:

    查看TextField 的(缩短的)默认 JavaFX 样式可以解释很多:

    .text-input {
      -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;
    }
    

    所以背景是包含边框的分层背景。这种技术在整个 JavaFX 中被大量使用。但是只修改一种颜色很容易。

    首先我们需要为TextField分配一个新的自定义样式类:

    TextField textField = new TextField();
    textField.getStyleClass().add("custom");
    

    和 CSS 文件:

    .custom {
      -fx-control-inner-background: orange;
    }
    

    如您所见,您不必覆盖文本字段的所有样式,只需覆盖用于背景的颜色变量即可。

    【讨论】:

    • 有没有办法将背景颜色设置为 value0 的值,因为我希望能够更改 value0 进而更改背景颜色
    • 以编程方式更改这将重置所有背景颜色。但是您也可以在运行时通过 CSS 更改颜色。例如通过更改样式类或伪类状态。
    • 我使用了你的 CSS 的修改版本来修复它
    【解决方案4】:

    尝试使用 CSS 设置颜色:

    TextField colorBox0;
    colorBox0.setStyle("-fx-background-color: white;");
    

    【讨论】:

    • 那行不通。它也改变了边界。对于所有将找到此答案的人。
    • 正如 OP 发现的那样,使用 -fx-control-inner-background 而不是 -fx-background-color 是可行的。
    猜你喜欢
    • 2022-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-14
    • 1970-01-01
    • 1970-01-01
    • 2019-03-25
    相关资源
    最近更新 更多