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

Question

对于三种情况，我想要一个具有三种不同边框的文本字段:

• 未悬停或聚焦时的白色边框
• 悬停时出现灰色边框
• 聚焦和打字时出现蓝色边框

我是这样开始的:

#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;
}

问题是聚焦边框永远不会出现。如何正确设置？

Answer 1

我是这样用的

.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;
}