JavaFX - 使用CSS为文本框设置焦点边框

Question

JavaFX - 使用CSS为文本框设置焦点边框

3

我希望有一个文本框，针对三种情况分别有不同的边框：

当未悬停或未聚焦时，白色边框
当悬停时，灰色边框
当聚焦并输入时，蓝色边框

我开始的代码如下:

#custom-text-field  {
    -fx-border-width: 2;
    -fx-border-color: white;
}

#custom-text-field:hover{
    -fx-border-width: 2;
    -fx-border-color: #909090;
}

#custom-text-field:focused{
    -fx-border-width: 2;
    -fx-border-color: #0093EF;
}

问题在于焦点边框从未显示。我该如何正确设置它？

- user1406177

其他的CSS选择器是否按预期工作？ - Uluk Biy

标准样式和悬停样式都按预期工作。 - user1406177

当您的文本字段获得焦点时，您是否仍然看到默认的蓝色焦点高亮显示？您可以尝试使用“-fx-focus-color”。 - Brendan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CONDEVX · Accepted Answer

我这样使用它。

.custom-text-field {
    -fx-background-color:
        #FFFFFF,
        #FFFFFF;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 0, 0;
 }

.custom-text-field:focused {
    -fx-background-color:
        #0093EF,
        #FFFFFF;
}

.custom-text-field:hover {
    -fx-background-color:
        #909090,
        #FFFFFF;
}

.custom-text-field:focused:hover {
    -fx-background-color:
        #0093EF,
        #FFFFFF;
}