cssjavafxmaterialfx

The :focused pseudo-class does not work (CSS/JavaFX)

I'm making an application in JavaFX and using MFXTextField, which is part of the MaterialFX library. The task is to make the floating-text change color when the field is activated. I tried using the css pseudo-classes :focus and :focused, but it doesn't work. However, interestingly, the pseudo-class :pressed works

Here's what doesn't work:

.mfx-text-field .floating-text{
    -fx-text-fill: black;
}


.mfx-text-field:focused .floating-text {
    -fx-text-fill: -primary-color;
}

enter image description here

Works (but i don't need it):

.mfx-text-field .floating-text{
    -fx-text-fill: black;
}


.mfx-text-field:pressed .floating-text {
    -fx-text-fill: -primary-color;
}

The question is why might :focused not work?

Solution

  • Instead of :focused use :focus-within