CODEWITHSUNDEEP
javafx
user1406177
user1406177

Reputation: 1370

JavaFX - Set focus border for Textfield using CSS

I want to have a textfield with three different borders for three cases:

I started like this:

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

The problem is that the border for focusing never shows up. How do it set it correctly?

Upvotes: 3

Views: 10960

Answers (1)

CONDEVX
CONDEVX

Reputation: 494

I use it like this

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

Upvotes: 3

Related Questions