javafx - JavaFX - 使用 CSS 为 Textfield 设置焦点边框

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